﻿<template>
	<view class="product-info-page">
		<AdaptiveNavBar text-color="#ffffff" backgroundColor="transparent" :showHome="true" shadow-style="none" />
		<scroll-view class="product-info-container" @scroll="onScroll" :scroll-top="programScrollTop"
			:scroll-with-animation="true" scroll-y>
			<!-- 顶部轮播图 -->
			<view class="banner-container">
				<swiper class="banner-swiper" circular autoplay v-if="bannerImages.length" @change="onBannerChange">
					<swiper-item v-for="(item, index) in bannerImages" :key="index">
						<image class="banner-img" :src="item.url" mode="aspectFill" />
					</swiper-item>
				</swiper>
				<!-- 如果没有轮播图，显示占位图 -->
				<view v-else class="banner-placeholder">
					<up-icon name="photo" size="60" color="#ccc" />
					<text>暂无图片</text>
			</view>
				<view class="banner-info-bar" v-if="mainInfo.productSku">

					<view class="info-item" style="margin-left: 30rpx;">
						<up-icon name="account" size="14" color="#fff" />
						<text>{{ mainInfo.productSku?.minYearOld ? (mainInfo.productSku?.minYearOld + '-' +
							mainInfo.productSku?.maxYearOld + '岁') : '年龄范围' }}</text>
					</view>
					<view style="padding:0rpx 34rpx">|</view>
					<view class="info-item">
						<up-icon name="clock" size="14" color="#fff" />
						<text>{{ mergedItineraries.length || 0 }}天</text>
					</view>
					<view style="padding:0rpx 34rpx">|</view>
					<view class="info-item">
						<up-icon name="map" size="14" color="#fff" />
						<text>{{ mainInfo.productSku.specificItinerary?.[0]?.items?.[0]?.address?.split('市')[0] ||
							'暂无地址' }}</text>
					</view>

					<!-- 轮播图下方信息条 -->
					<view class="info-item"
						style="display: flex;justify-content: flex-end;flex:1;padding-right: 30rpx;">
						<text class="current">{{ activeIndex }}</text>
						<text class="split">/</text>
						<text class="total">{{ bannerImages.length }}</text>
					</view>
				</view>
			</view>
			<!-- 产品标题 -->
			<view class="container-card">
				<view class="title-container" id="title-container" v-if="!stickyTitle">
					<view class="title">{{ mainInfo.productSpu?.name || '暂无产品标题' }}</view>
					<!-- 渠道标签和价格 -->
					<view class="channel-price-tag">
						<view class="channel-tag" :style="channelTagStyle">{{ getCityFromAddress() || '待设置' }}{{ getProductTypeSuffix() }}</view>
						<text class="channel-text">渠道 ¥ <text class="price-integer">{{ priceInteger }}</text><text
								class="price-decimal">.{{ priceDecimal }}</text> CNY</text>
					</view>
				</view>
				<AdaptiveNavBar title="产品详情" text-color="#333333" backgroundColor="#ffffff" v-else />
				<!-- 产品标题占位元素，避免吸顶时内容跳动 -->
				<view v-if="stickyTitle" class="title-placeholder"></view>

				<!-- 导航栏锚点：用于计算吸顶阈值（初始不显示导航，仅作为位置参考） -->
				<view id="nav-anchor"></view>

				<!-- 导航栏（仅吸顶时显示） -->
				<view v-if="stickyNav" class="nav-container sticky-nav" id="nav-container"
					:style="{ top: titleHeightPx + 'px' }">
					<view class="nav-item" v-for="(item, index) in navItems" :key="index"
						:class="{ 'active': activeNavIndex === index }" @tap="scrollToSection(item.id)">
						<text>{{ item.name }}</text>
					</view>
				</view>
				<!-- 导航栏占位元素，避免吸顶时内容跳动 -->
				<view v-if="stickyNav" class="nav-placeholder"></view>

				<!-- 班期选择独立卡片 -->
				<view class="card schedule-card">
					<view class="section-header">
							<view class="section-header__left">
								<view class="section-header__icon-wrapper">
									<FontIcon name="icon-xuanzebanqi"
										class="section-header__icon section-header__font_icon"></FontIcon>
								</view>
							<text v-if="mode === 'callApply'">班期</text>
							<text v-else>班期选择</text>
							</view>
						<!-- <view v-if="datelist.length > maxDisplayDates" class="section-header__right" @tap="showDateModal">
						<text>全部班期</text>
						<up-icon name="arrow-right" size="12" color="#ff6700" style="margin-left: 6rpx;" />
					</view> -->
						</view>
					<view class="period-cards-container">
						<view class="period-cards-scroll">
							<view v-for="(date, index) in displayDateList" :key="date.id || index" class="period-card"
								:class="{ selected: selectedDate && selectedDate.id === date.id }"
								@tap="handleDateCardClick(date)">
								<view class="period-card__date">
									<text class="period-card__month-day">{{ formatMonthDay(date.DateName) }}</text>
									<!-- <text class="period-card__year">{{ formatYear(date.DateName) }}</text> -->
								</view>
								<view class="period-card__week">{{ date.WeekName }}</view>
							</view>
							<view v-if="displayDateList.length" class="period-card-placeholder"
								style="width: 104rpx;height: 120rpx;"></view>
							<view v-if="!displayDateList.length" class="empty-dates">
								<text class="empty-text">暂无可选班期</text>
							</view>
						</view>
						<view class="all-periods-button" @tap.stop="showDateModal">
								<text>全部</text>
								<text>班期</text>
							</view>
						</view>

					<view v-if="mode === 'callApply' && selectedDate && getPeriodPrice(selectedDate)"
							class="channel-price-info">
							<text class="channel-price-label" style="color: #999999;">渠道价：</text>
							<view class="channel-price-value">
								<text class="currency">¥</text>
							<text class="price-int">{{ getPeriodPriceParts(selectedDate).int }}</text>
							<text class="price-dec">.{{ getPeriodPriceParts(selectedDate).dec }}</text>
								<text class="per">元/人</text>
							</view>
					</view>
				</view>

				<!-- 卡片：罗列展示 -->
				<!-- 产品特色 -->
				<view class="card" id="features-section" style="padding: 30rpx 0rpx;">
					<view class="section-title">
						<text>产品特色</text>
							</view>
					<view class="card-content" style="padding: 20rpx 0rpx;">
						<view v-if="mergedFeatures?.length">
							<!-- 特色内容容器，根据展开状态控制高度 -->
							<view class="features-container" :class="{ 'collapsed': !cardFoldStates.features }">
								<view v-for="(item, index) in mergedFeatures" :key="index" class="feature-item"
									:style="(item.alt && item.alt !== '产品特色图片') ? 'padding:0rpx 20rpx' : ''">
									<!-- 显示图片（如果有） -->
									<image v-if="item.imgUrl" :src="item.imgUrl" class="feature-image"
										mode="widthFix" />
									<!-- 显示文本内容 -->
									<text v-if="item.alt && item.alt !== '产品特色图片'" class="feature-text">{{ item.alt
									}}</text>
						</view>
						</view>
							<!-- 展开/收起按钮 -->
							<view class="expand-btn" @tap="toggleCard('features')">
								<text class="expand-text">{{ cardFoldStates.features ? '收起' : '展开' }}</text>
								<up-icon :name="cardFoldStates.features ? 'arrow-up' : 'arrow-down'" size="16"
									color="#999" />
					</view>
						</view>
						<view v-else class="empty-content">暂无产品特色</view>
					</view>
							</view>
				<!-- 具体行程 -->
				<view class="card" id="itinerary-section" style="padding:30rpx 0rpx">
					<view class="card-header">
						<view class="section-title">
							<text>具体行程</text>
					</view>
							</view>
					<view class="card-content" style="padding: 20rpx 0rpx;">
						<view v-if="mergedItineraries?.length">
							<view v-for="(dayItem, index) in mergedItineraries" :key="index" class="day-item">
								<!-- 每一天的头部 -->
								<view class="day-header" @tap="toggleDay(index)">
									<view class="day-badge">D{{ dayItem.day }}</view>
									<view class="day-content">
										<text class="day-title">{{ dayItem.main || '行程安排' }}</text>
						</view>
									<image class="day-arrow-icon" :class="{ 'day-arrow-rotated': dayItem.show }"
										src="/static/systemIcon/arrow-bottom.png" mode="aspectFit" />
						</view>

								<!-- 子项目列表 -->
								<view v-if="dayItem.show" class="day-details">
									<view class="activity-list">
										<view v-for="(item, itemIndex) in dayItem.items" :key="itemIndex"
											class="itinerary-detail-item">
											<view class="item-time-container">
												<text class="item-time">{{ item.startTime || '10:30' }}</text>
												<text class="item-type">{{ item.title || '活动' }}</text>
												<text class="item-separator">|</text>
												<text class="item-name">{{ item.name || item.alt || '未填写标题' }}</text>
					</view>

											<view class="item-details">
												<view class="item-detail-row">
													<view class="detail-label">
														<img class="detail-label-icon"
															src="../../static/systemIcon/time.png" alt="">
						</view>
													<text class="detail-value">{{ item.startTime }} - {{ item.endTime
													}}</text>
					</view>
												<view class="item-detail-row">
													<view class="detail-label" style="align-items: flex-start;margin-top: 6rpx;">
														<img class="detail-label-icon"
															src="../../static/systemIcon/address.png" alt="">
								</view>
													<view class="detail-value address-display">
														<view v-if="getAddressName(item.address)"
															class="address-name">{{
																getAddressName(item.address) }}</view>
														<view v-if="getAddressLocation(item.address)"
															class="address-location">{{
																getAddressLocation(item.address) }}</view>
							</view>
						</view>
												<view class="item-detail-row" v-if="item.description">
													<view class="detail-label">
														<img class="detail-label-icon"
															src="../../static/systemIcon/introduction.png" alt="">
								</view>
													<text class="detail-value">{{ item.description }}</text>
							</view>
						</view>
								</view>
							</view>
						</view>
								</view>
							</view>
						<view v-else class="empty-content">暂无行程安排</view>
						</view>
				</view>
				<!-- 服务详情 -->
				<view class="card" id="service-section">
					<view class="card-header" @tap="toggleCard('service')">
						<view class="section-title-with-lines">
							<view class="title-line"></view>
							<text class="title-text">服务详情</text>
							<view class="title-line"></view>
						</view>
					</view>
					<view class="card-content">
						<!-- 费用包含模块 -->
						<view class="expense-section">
							<view class="expense-title">费用包含</view>
							<view v-if="mainInfo.productSku?.expensesIncluded?.length">
								<view v-for="(service, i) in mainInfo.productSku?.expensesIncluded" :key="i"
									class="info-row">
									<text class="label">{{ service.title }}</text>
									<text class="value">{{ service.alt }}</text>
								</view>
							</view>
						</view>

						<!-- 分隔线 -->
						<view class="expense-divider"></view>

						<!-- 费用不含模块 -->
						<view class="expense-section">
							<view class="expense-title">费用不含</view>
							<view v-if="mainInfo.productSku?.expensesExcluded">
								<view class="info-row">

									<text class="value">{{ mainInfo.productSku?.expensesExcluded }}</text>
								</view>
							</view>
						</view>

						<!-- 分隔线 -->
						<view class="expense-divider"></view>

						<!-- 另付费项目模块 -->
						<view class="expense-section">
							<view class="expense-title">另付费项目</view>
							<view v-if="mainInfo.productSku?.otherExpenses">
								<view class="info-row">
									<text class="value">{{ mainInfo.productSku?.otherExpenses }}</text>
								</view>
							</view>
						</view>

						<view
							v-if="!mainInfo.productSku?.expensesIncluded?.length && !mainInfo.productSku?.expensesExcluded?.length && !mainInfo.productSku?.otherExpenses?.length"
							class="empty-content">暂无服务详情</view>
						</view>
					</view>

				<!-- 服务商信息 -->
				<view class="card" id="service-section">
					<view class="card-header" @tap="goshop()" style="padding: 0rpx 16rpx;">
						<view class="section-title-with-lines" style="justify-content: flex-start;padding-top: 0rpx;">
							<text class="expense-title">服务商信息</text>
								</view>
						<view class="serve-box" v-if="handleServiceInfoShow() == 1">
							<view class=" serve-title">
								{{ getServiceProviderPrefix() }}:
							</view>
							<view class="serve-content">
								<view>{{ originCompanyInfo.name }}</view>
						</view>
								</view>
						<view class="serve-box" v-if="handleServiceInfoShow() == 2">
							<view class="serve-title">
								{{ getServiceProviderPrefix() }}:
							</view>
							<view class="serve-content">
								<view>{{ originCompanyInfo.name }}</view>
						</view>
								</view>
						<view class="serve-box" v-if="handleServiceInfoShow() == 3">
							<view class="serve-title">
								{{ getServiceProviderPrefix() }}:
							</view>
							<view class="serve-content">
								<view>{{ originCompanyInfo.name }}</view>
						</view>
								</view>
							</view>

						</view>

				<!-- 预定须知 -->
				<view class="card" id="notice-section">
					<view class="card-header">
						<view class="section-title-with-lines">
							<view class="title-line"></view>
							<text class="title-text">预定须知</text>
							<view class="title-line"></view>
								</view>
							</view>
					<view class="card-content">
						<!-- 预定限制模块 -->
						<view class="expense-section">
							<view class="expense-header">
								<view class="expense-title">预定限制</view>
								<!-- <image 
								class="notice-arrow-icon" 
								:class="{ 'notice-arrow-rotated': noticeItemStates.basic }"
								src="/static/systemIcon/arrow-bottom.png" 
								mode="aspectFit"
							/> -->
						</view>
							<view v-if="noticeItemStates.basic" class="expense-content">
								<view class="info-row" style="flex-direction: column;">
									<view class="value">适用年龄范围: {{ Number(mainInfo.productSku?.minYearOld) }}岁-{{
										Number(mainInfo.productSku?.maxYearOld) }}岁</view>
									<view class="value">本产品{{ mainInfo.productSku?.parentsAccompanied == 0 ? '不支持' :
										'支持'
									}}家长陪同
									</view>
								</view>
							</view>
						</view>

						<!-- 分隔线：判断是否还有后续内容 -->
						<view class="expense-divider"
							v-if="hasGuaranteePrompt || hasRiskPrompt || hasCustomizationPrompt || shouldShowGroupRules()">
						</view>

						<!-- 保障提示模块 -->
						<view class="expense-section" v-if="hasGuaranteePrompt">
							<view class="expense-header">
								<view class="expense-title">保障提示</view>
								<!-- <image 
                                class="notice-arrow-icon" 
                                :class="{ 'notice-arrow-rotated': noticeItemStates.guarantee }"
                                src="/static/systemIcon/arrow-bottom.png" 
                                mode="aspectFit"
                            /> -->
					</view>
							<view v-if="noticeItemStates.guarantee" class="expense-content">
								<view class="info-row" v-for="(item, index) in guaranteePromptList" :key="index">
									<text class="value">{{ getPromptText(item) }}</text>
							</view>
						</view>
					</view>

						<!-- 分隔线：判断是否还有后续内容 -->
						<view class="expense-divider"
							v-if="hasGuaranteePrompt && (hasRiskPrompt || hasCustomizationPrompt || shouldShowGroupRules())">
							</view>

						<!-- 风险提示模块 -->
						<view class="expense-section" v-if="hasRiskPrompt">
							<view class="expense-header" @tap="toggleNoticeItem('risk')">
								<view class="expense-title">风险提示</view>
								<image class="notice-arrow-icon"
									:class="{ 'notice-arrow-rotated': noticeItemStates.risk }"
									src="/static/systemIcon/arrow-bottom.png" mode="aspectFit" />
						</view>
							<view v-if="noticeItemStates.risk" class="expense-content">
								<view class="info-row" v-for="(item, index) in riskPromptList" :key="index">
									<text class="value">{{ getPromptText(item) }}</text>
					</view>
							</view>
						</view>

						<!-- 分隔线：判断是否还有后续内容 -->
						<view class="expense-divider"
							v-if="hasRiskPrompt && (hasCustomizationPrompt || shouldShowGroupRules())"></view>

						<!-- 自定义提示模块（数组拆开逐条渲染，样式与风险提示一致） -->
						<template v-if="hasCustomizationPrompt">
							<template v-for="(cp, cIdx) in customizationPromptList" :key="cIdx">
								<view class="expense-section">
									<view class="expense-header" @tap="toggleCustomizationItem(cIdx)">
										<view class="expense-title">{{ cp.title || ('自定义提示' + (cIdx + 1)) }}</view>
										<image class="notice-arrow-icon"
											:class="{ 'notice-arrow-rotated': noticeItemStates['customization_' + cIdx] }"
											src="/static/systemIcon/arrow-bottom.png" mode="aspectFit" />
						</view>
									<view v-if="noticeItemStates['customization_' + cIdx]" class="expense-content">
										<view class="info-row">
											<text class="value">{{ getPromptText(cp) }}</text>
					</view>
								</view>
							</view>
								<!-- 分隔线：自定义数组内部的分隔线 -->
								<view class="expense-divider" v-if="cIdx !== (customizationPromptList.length - 1)">
								</view>
							</template>
						</template>

						<!-- 分隔线：判断是否还有后续内容 -->
						<view class="expense-divider" v-if="hasCustomizationPrompt && shouldShowGroupRules()"></view>

						<!-- 成团说明模块 -->
						<view class="expense-section" v-if="shouldShowGroupRules()">
							<view class="expense-header" @tap="toggleTermsItem('group')">
								<view class="expense-title">成团说明</view>
								<image class="notice-arrow-icon"
									:class="{ 'notice-arrow-rotated': termsItemStates.group }"
									src="/static/systemIcon/arrow-bottom.png" mode="aspectFit" />
							</view>
							<view v-if="termsItemStates.group" class="expense-content">
								<view class="info-row">
									<text class="value">{{ mainInfo.productSku?.groupRules?.groupDescription ||
										'本次旅游团人数为15人起，报名后将根据人数确认出发日期，确保旅行质量。若人数未达成团要求，将提供退款或调整出发时间的选项。团员需按时缴纳费用，确保顺利成行。'
									}}</text>
								</view>
							</view>
					</view>

						<!-- 退团规则模块 -->
						<view class="expense-section" v-if="shouldShowGroupRules()">
							<!-- 分隔线：判断是否还有后续内容 -->
							<view class="expense-divider" v-if="shouldShowGroupRules()"></view>
							<view class="expense-header" @tap="toggleTermsItem('refund')">
								<view class="expense-title">退团规则</view>
								<image class="notice-arrow-icon"
									:class="{ 'notice-arrow-rotated': termsItemStates.refund }"
									src="/static/systemIcon/arrow-bottom.png" mode="aspectFit" />
							</view>
							<view v-if="termsItemStates.refund" class="expense-content">
								<view class="info-row">
									<text class="value">{{ mainInfo.productSku?.groupRules?.refundRules ||
										'出发前7天内申请退团，按已支付费用的80%退还；出发前3天内申请退团，按已支付费用的50%退还；出发前1天内申请退团，恕不退还费用。特殊情况下可提供部分退款或改期服务，具体以实际情况为准，退团需提供书面申请。'
									}}</text>
						</view>
						</view>
					</view>

						<!-- 违约条款模块 -->
						<view class="expense-section" v-if="shouldShowGroupRules()">
							<!-- 分隔线：判断是否还有后续内容 -->
							<view class="expense-divider" v-if="shouldShowGroupRules()"></view>
							<view class="expense-header" @tap="toggleTermsItem('breach')">
								<view class="expense-title">违约条款</view>
								<image class="notice-arrow-icon"
									:class="{ 'notice-arrow-rotated': termsItemStates.breach }"
									src="/static/systemIcon/arrow-bottom.png" mode="aspectFit" />
						</view>
							<view v-if="termsItemStates.breach" class="expense-content">
								<view class="info-row">
									<text class="value">{{ mainInfo.productSku?.groupRules?.breachClause ||
										'若游客未按约定时间参加旅行或提前终止行程，将根据实际损失收取相应违约金。若因不可抗力因素导致旅行无法成行，按合同约定提供全额退款或改期服务。违约行为需承担因此产生的费用。'
									}}</text>
					</view>
							</view>
								</view>

						<!-- 判断是否有任何内容（这里已经有预定限制模块了） -->
						<view
							v-if="!hasGuaranteePrompt && !hasRiskPrompt && !hasCustomizationPrompt && !shouldShowGroupRules()"
							class="empty-content" style="padding: 20rpx 0rpx;">暂无其他预定须知</view>
							</view>
						</view>
					</view>
			<!-- 第一个底部操作栏(用户可见) - 立即预订 -->
			<view v-if="shouldShowBookBar" class="bottom-action-bar-book">
				<!-- 左侧功能按钮 -->
				<view class="left-actions">
					<view class="action-item" @tap="goHome">
						<view class="action-icon">
							<image src="/static/systemIcon/detail-home.jpg" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;" />
					</view>
						<text class="action-text">首页</text>
					</view>
					<view class="action-item" @tap="consultation">
						<view class="action-icon">
							<image src="/static/systemIcon/detail-server.jpg" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;" />
						</view>
						<text class="action-text">咨询</text>
					</view>
					<button class="action-item share-btn" open-type="share">
						<view class="action-icon" style="background: none;">
							<image src="/static/systemIcon/detail-share.jpg" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;" />
						</view>
						<text class="action-text">分享</text>
					</button>
				</view>

				<!-- 右侧红色操作按钮 - 立即预订 -->
				<view class="right-action right-action-red" @tap="bookNow">
					<view class="action-content">
						<view class="price-info">
							<text class="price-text">¥{{ price || '0.00' }} CNY</text>
							<text class="action-desc">立即预订</text>
						</view>
					</view>
							</view>
							</view>

			<!-- 第二个底部操作栏(商家可见) - 分类入口，根据 businessType 区分三类 -->
			<view v-if="shouldShowApplyBar" class="bottom-action-bar-top">
				<!-- 左侧功能按钮：一类仅"首页"，二/三类显示"首页/咨询/转发" -->
				<view class="left-actions">
					<view class="action-item" @tap="goHome">
						<view class="action-icon">
							<image src="/static/systemIcon/detail-home.jpg" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;" />
							</view>
						<text class="action-text">首页</text>
						</view>
					<button v-if="Number(businessType) !== 1" class="action-item share-btn" open-type="share">
						<view class="action-icon" style="background: none;">
							<image src="/static/systemIcon/detail-share.jpg" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;" />
						</view>
						<text class="action-text">分享</text>
					</button>
					<view v-if="Number(businessType) !== 1" class="action-item" @tap="consultation">
						<view class="action-icon">
							<image src="/static/systemIcon/detail-server.jpg" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;" />
					</view>
						<text class="action-text">咨询</text>
						</view>
						</view>

				<!-- B1商户（绿色：发送协作邀请） -->
				<view v-if="Number(businessType) === 1" class="right-action" @tap="transferToChannel">
					<view class="action-content">
						<view class="price-info">
							<text class="price-text">¥{{ price || '0.00' }} CNY</text>
							<text class="action-desc">发送协作邀请</text>
					</view>
						<view class="arrow-icon">
							<FontIcon name="icon-fenxiangyifenxiang" :size="'24rpx'" color="#ffffff"
								:wrapperWidth="'32rpx'" :wrapperHeight="'32rpx'" />
						</view>
					</view>
				</view>

				<!-- B2商户（蓝色：申请协作调用） -->
				<view v-else-if="Number(businessType) === 2" class="right-action right-action-blue" @tap="applyForCall">
					<view class="action-content">
						<view class="price-info">
							<text class="price-text">¥ {{ mainInfo.price || '0.00' }} CNY</text>
							<text class="action-desc">申请协作调用</text>
					</view>
					</view>
					</view>

				<!-- B3商户（蓝色：申请协作调用） -->
				<view v-else-if="Number(businessType) === 3" class="right-action right-action-blue" @tap="applyForCall">
					<view class="action-content">
						<view class="price-info">
							<text class="price-text">¥ {{ mainInfo.price || '0.00' }} CNY</text>
							<text class="action-desc">申请协作调用</text>
					</view>
					</view>
				</view>

				<!-- 用户（红色：立即预订） -->
				<view v-else class="right-action right-action-red" @tap="bookNow">
					<view class="action-content">
						<view class="price-info">
							<text class="price-text">¥ {{ price || '0.00' }} CNY</text>
							<text class="action-desc">立即预订</text>
						</view>
					</view>
				</view>
						</view>

			<!-- 预览模式提示 -->
			<view v-if="isPreviewMode" class="preview-notice">
				<view class="preview-icon">
					<up-icon name="eye" size="24" color="#ff6700" />
											</view>
				<view class="preview-text">
					<text class="preview-title">预览模式</text>
					<text class="preview-desc">此页面仅用于预览产品效果，非正式产品页面</text>
									</view>
				<view class="exit-preview-btn" @tap="exitPreview">返回编辑</view>
									</view>

			<!-- 营期选择弹出层 -->
			<up-popup v-model="showDatePopup" mode="bottom" border-radius="20" :safe-area-inset-bottom="true">
				<view class="date-modal">
					<view class="modal-header">
						<text class="modal-title">选择营期</text>
						<view class="close-btn" @tap="closeDateModal">
							<up-icon name="close" size="20" color="#999" />
									</view>
								</view>
					<view class="modal-content">
						<view class="date-grid">
							<view v-for="(date, index) in datelist" :key="index" class="date-item"
								:class="{ 'active': selectedDateIndex === index }" @tap="selectDate(date, index)">
								<view class="date-day">{{ date.Datevalue1 }}</view>
								<view class="date-week">{{ date.WeekName }}</view>
								<view class="date-price">¥{{ getPeriodPrice(date) }}</view>
								</view>
							</view>
					</view>
					<view class="modal-footer">
						<button class="confirm-btn" @tap="confirmDateSelection">确认选择</button>
						</view>
					</view>
			</up-popup>
			<!-- 发售地区多级选择 -->
			<up-picker :show="show" ref="uPickerRef" :columns="columns" @confirm="confirm" @change="changeHandler"
				@cancel="cancel"></up-picker>
		</scroll-view>

		<!-- 第一个底部操作栏(用户可见) - 立即预订 -->
		<view v-if="shouldShowBookBar" class="bottom-action-bar-book">
			<!-- 左侧功能按钮 -->
			<view class="left-actions">
				<view class="action-item" @tap="goHome">
					<view class="action-icon">
						<image src="/static/systemIcon/detail-home.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
							</view>
					<text class="action-text">首页</text>
							</view>
				<button class="action-item share-btn" open-type="share">
					<view class="action-icon" style="background: none;">
						<image src="/static/systemIcon/detail-share.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
						</view>
					<text class="action-text">分享</text>
				</button>
				<view class="action-item" @tap="consultation">
					<view class="action-icon">
						<image src="/static/systemIcon/detail-server.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
						</view>
					<text class="action-text">咨询</text>
				</view>
					</view>

			<!-- 右侧红色操作按钮 - 立即预订 -->
			<view class="right-action right-action-red" @tap="bookNow">
				<view class="action-content">
					<view class="price-info">
						<text class="price-text">¥{{ price || '0.00' }} CNY</text>
						<text class="action-desc">立即预订</text>
							</view>
							</view>
						</view>
							</view>

		<!-- 第二个底部操作栏(商家可见) - 分类入口，根据 businessType 区分三类 -->
		<view v-if="shouldShowApplyBar" class="bottom-action-bar-top">
			<!-- 左侧功能按钮：一类仅"首页"，二/三类显示"首页/咨询/转发" -->
			<view class="left-actions">
				<view class="action-item" @tap="goHome">
					<view class="action-icon">
						<image src="/static/systemIcon/detail-home.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
						</view>
					<text class="action-text">首页</text>
					</view>
				<view v-if="Number(businessType) !== 1" class="action-item" @tap="consultation">
					<view class="action-icon">
						<image src="/static/systemIcon/detail-server.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
					</view>
					<text class="action-text">咨询</text>
						</view>
				<button v-if="Number(businessType) !== 1" class="action-item share-btn" open-type="share">
					<view class="action-icon" style="background: none;">
						<image src="/static/systemIcon/detail-share.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
							</view>
					<text class="action-text">分享</text>
				</button>
							</view>

			<!-- B1商户（绿色：发送协作邀请） -->
			<view v-if="Number(businessType) === 1" class="right-action" @tap="transferToChannel">
				<view class="action-content">
					<view class="price-info">
						<text class="price-text">¥{{ price || '0.00' }} CNY</text>
						<text class="action-desc">发送协作邀请</text>
						</view>
					<view class="arrow-icon">
						<FontIcon name="icon-fenxiangyifenxiang" :size="'24rpx'" color="#ffffff" :wrapperWidth="'32rpx'"
							:wrapperHeight="'32rpx'" />
							</view>
						</view>
						</view>

			<!-- B2商户（蓝色：申请协作调用） -->
			<view v-else-if="Number(businessType) === 2" class="right-action right-action-blue" @tap="applyForCall">
				<view class="action-content">
					<view class="price-info">
						<text class="price-text">¥ {{ mainInfo.price || '0.00' }} CNY</text>
						<text class="action-desc">申请协作调用</text>
					</view>
				</view>
					</view>

			<!-- B3商户（蓝色：申请协作调用） -->
			<view v-else-if="Number(businessType) === 3" class="right-action right-action-blue" @tap="applyForCall">
				<view class="action-content">
					<view class="price-info">
						<text class="price-text">¥ {{ mainInfo.price || '0.00' }} CNY</text>
						<text class="action-desc">申请协作调用</text>
						</view>
							</view>
						</view>

			<!-- 用户（红色：立即预订） -->
			<view v-else class="right-action right-action-red" @tap="bookNow">
				<view class="action-content">
					<view class="price-info">
						<text class="price-text">¥ {{ price || '0.00' }} CNY</text>
						<text class="action-desc">立即预订</text>
						</view>
							</view>
						</view>
					</view>

		<!-- 第三个底部操作栏(商家端产品详情页) - 传给渠道客户 -->
		<view v-if="shouldShowTransferBar" class="bottom-action-bar">
			<!-- 左侧功能按钮 -->
			<view class="left-actions">
				<view class="action-item" @tap="goHome">
					<view class="action-icon">
						<image src="/static/systemIcon/detail-home.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
					</view>
					<text class="action-text">首页</text>
				</view>
				<button class="action-item share-btn" open-type="share">
					<view class="action-icon" style="background: none;">
						<image src="/static/systemIcon/detail-share.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
					</view>
					<text class="action-text">分享</text>
				</button>
				<view class="action-item" @tap="consultation">
					<view class="action-icon">
						<image src="/static/systemIcon/detail-server.jpg" mode="aspectFit"
							style="width: 40rpx; height: 40rpx;" />
					</view>
					<text class="action-text">咨询</text>
				</view>
			</view>

			<!-- 右侧绿色操作按钮 -->
			<view class="right-action" @tap="transferToChannel">
				<view class="action-content">
					<view class="price-info">
						<text class="price-text">¥{{ price || '0.00' }} CNY</text>
						<text class="action-desc">发送协作邀请</text>
					</view>
					<view class="arrow-icon">
						<FontIcon name="icon-fenxiangyifenxiang" :size="'24rpx'" color="#ffffff" :wrapperWidth="'32rpx'"
							:wrapperHeight="'32rpx'" />
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
import { request } from '@/utils/request';
// 导入productUtil.js中的工具函数，用于处理产品数据
import { mergeAllProducts } from '@/utils/productUtil';
import { applyPeriod } from '@/api/index'
import GlobalTopNav from '@/components/GlobalTopNav';
import AdaptiveNavBar from '@/components/AdaptiveNavBar.vue';

export default {
	name: 'ProductInfo',
	components: {
		GlobalTopNav,
		AdaptiveNavBar,
	},
	data() {
		return {
			// 页面基本数据
			activeIndex: 1,
			// 产品数据
			productInfo: {},
			mainInfo: {},
			mergedFeatures: [],
			mergedItineraries: [],
			datelist: [],
			periodList: [],
			isPreviewMode: false,
			currentMerchantType: '',
			productType: '', // 产品类型：1-泛营地接待，2-综合研学业务，3-目的地接待，4-组团业务，5-研学活动
			// 性能优化相关
			scrollTimer: null, // 滚动节流定时器
			sectionPositions: [], // 缓存区域位置信息
			lastScrollTop: 0, // 上次滚动位置
			// 胶囊按钮（右上角三点菜单）相关
			menuButtonInfo: null,
			capsuleBottomPx: 0,
			capsuleTopPx: 0,
			capsuleHeightPx: 0,
			// 缓存计算结果，避免频繁计算
			cachedTitleHeightPx: 0,
			cachedNavHeightPx: 0,
			showAdaptiveNav: false,
			isScrollingToTarget: false, // 是否正在执行滚动到目标位置的动画
			pendingTargetIndex: -1, // 程序滚动时期望激活的导航索引
			// 营期选择相关
			showDatePopup: false, // 弹出层显示状态
			tempSelectedDateIndex: -1, // 临时选择的营期索引
			show: false,
			columns: [
				['河南省', '广东省', '北京市', '上海市', '江苏省', '浙江省', '山东省', '湖北省', '湖南省', '四川省'],
				['郑州市', '洛阳市', '开封市', '南阳市', '许昌市', '平顶山市', '安阳市', '新乡市', '焦作市', '濮阳市']
			],
			columnData: [
				['郑州市', '洛阳市', '开封市', '南阳市', '许昌市', '平顶山市', '安阳市', '新乡市', '焦作市', '濮阳市'],
				['广州市', '深圳市', '珠海市', '汕头市', '佛山市', '韶关市', '湛江市', '肇庆市', '江门市', '茂名市'],
				['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区'],
				['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区'],
				['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市'],
				['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市'],
				['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市'],
				['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市'],
				['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市'],
				['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市']
			],
			uPickerRef: null,
			//申请营期
			applyPeriod: {
				spuId: '',
				skuId: '',
				periodId: '',
				sourceMerchantId: '',
				sourceMerchantType: '',
				targetMerchantId: '',
				targetMerchantType: '',
				applyReason: '',
				salePrice: '',
				saleArea: ''
			},

			// 其他状态
			isFold: false,
			swiperCurrent: 0,
			selectedDateIndex: -1,
			selectedDate: {},
			mode: '',

			// 页面参数
			id: '', // spuId
			originCompanyInfo: {},
			companyInfo: {},
			price: 0,

			// 安全区域
			safeAreaInsets: {},

			// 卡片折叠状态
			cardFoldStates: {
				features: false,      // 产品特色 - false表示半展开状态，true表示完全展开
				itinerary: true,     // 具体行程
				service: true,       // 服务详情
				notice: true,        // 预定须知
				terms: true          // 成团/退团/违约条款
			},

			// 预定须知项目展开状态
			noticeItemStates: {
				basic: true,        // 预定须知基础信息
				guarantee: true,    // 保障提示
				risk: false          // 风险提示
			},

			// 条款项目展开状态
			termsItemStates: {
				group: false,        // 成团说明
				refund: false,       // 退团规则
				breach: false        // 违约条款
			},

			// 吸顶相关
			stickyTitle: false,       // 产品标题是否吸顶
			stickyNav: false,         // 导航栏是否吸顶
			activeNavIndex: 0,        // 当前激活的导航项索引
			scrollTop: 0,             // 滚动位置（记录用）
			programScrollTop: 0,      // 程序控制的滚动位置（用于绑定）
			titleOriginalTop: 0,      // 产品标题原始位置
			navOriginalTop: 0,        // 导航栏原始位置
			navItems: [               // 导航项配置
				{ name: '产品特色', id: 'features-section' },
				{ name: '具体行程', id: 'itinerary-section' },
				{ name: '服务详情', id: 'service-section' },
				{ name: '预定须知', id: 'notice-section' },
			],
			// 与 productInfoView 保持一致的判定依赖
			businessType: (uni.getStorageSync('companyInfo') || {}).businessType,
			businessEntry: uni.getStorageSync('businessEntry')
		};
	},
	computed: {
		// 轮播图图片列表
		bannerImages() {
			// 优先使用 productSku.images
			if (this.mainInfo.productSku?.images?.length) {
				return this.mainInfo.productSku.images;
			}
			// 如果没有，尝试使用 productSpu.images
			if (this.mainInfo.productSpu?.images?.length) {
				return this.mainInfo.productSpu.images;
			}
			// 如果都没有，尝试使用 mainImage 作为单张图片
			if (this.mainInfo.productSpu?.mainImage) {
				return [{ url: this.mainInfo.productSpu.mainImage }];
			}
			// 都没有，返回空数组
			return [];
		},
		// 显示的营期列表（限制数量）
		displayDateList() {
			return Array.isArray(this.datelist) ? this.datelist : [];
		},
		// 标题高度（rpx->px）- 使用缓存
		titleHeightPx() {
			if (this.$navbarUtil && this.$navbarUtil.getNavbarTotalHeight) {
				const h = this.$navbarUtil.getNavbarTotalHeight();
				if (typeof h === 'number' && h > 0) return h;
			}
			return this.cachedTitleHeightPx || this.rpxToPx(160);
		},
		// 导航高度（rpx->px）- 使用缓存
		navHeightPx() {
			return this.cachedNavHeightPx || this.rpxToPx(80);
		},
		// 是否显示立即预订操作栏（用户端首页进入）
		shouldShowBookBar() {
			return !this.isPreviewMode && this.mode === 'customer';
		},
		// 是否显示申请调用操作栏（商家端分类页进入）
		shouldShowApplyBar() {
			return !this.isPreviewMode && this.mode === 'callApply';
		},
		// 是否显示传给渠道客户操作栏（商家端首页自己的产品）
		shouldShowTransferBar() {
			return !this.isPreviewMode && this.mode === 'detail';
		},
		// 价格整数部分
		priceInteger() {
			const price = this.mainInfo.price || 0;
			return Math.floor(price);
		},
		// 价格小数部分
		priceDecimal() {
			const price = this.mainInfo.price || 0;
			const decimal = (price % 1).toFixed(2).substring(2);
			return decimal;
		},
		// 渠道标签样式（与 ProductCard baseTagStyle 逻辑一致）
		channelTagStyle() {
			// 如果是"待设置"，显示灰色（与 ProductCard placeholder 样式一致）
			const cityFromAddress = this.getCityFromAddress();
			if (!cityFromAddress) {
				return {
					color: '#999999',
					backgroundColor: '#f0f0f0'
				};
			}
			
			const productType = Number(this.productType) || 0;
			
			// P1（productType === 1）：一类用户，蓝色
			// P2（productType === 2, 3, 4）：二类用户，绿色
			// P3（productType === 5）：三类用户，橙色
			if (productType === 1) {
				// P1：一类用户，蓝色
				return {
					color: '#0081ff',
					backgroundColor: 'rgba(0, 129, 255, 0.1)'
				};
			} else if ([2, 3, 4].includes(productType)) {
				// P2：二类用户，绿色
				return {
					color: '#39B54A',
					backgroundColor: 'rgba(57, 181, 74, 0.1)'
				};
			} else if (productType === 5) {
				// P3：三类用户，橙色
				return {
					color: '#FBBD08',
					backgroundColor: 'rgba(251, 189, 8, 0.1)'
				};
			} else {
				// 默认使用二类用户的颜色
				return {
					color: '#39B54A',
					backgroundColor: 'rgba(57, 181, 74, 0.1)'
				};
			}
		},
		guaranteePromptList() {
			return this.convertToArrayFormat(this.mainInfo.productSku?.guaranteePrompt, '保障提示');
		},
		riskPromptList() {
			return this.convertToArrayFormat(this.mainInfo.productSku?.riskPrompt, '风险提示');
		},
		customizationPromptList() {
			const list = this.convertToArrayFormat(this.mainInfo.productSku?.customizationPrompt, '自定义提示');
			return Array.isArray(list) ? list : [];
		},
		hasGuaranteePrompt() {
			return this.guaranteePromptList.length > 0;
		},
		hasRiskPrompt() {
			return this.riskPromptList.length > 0;
		},
		hasCustomizationPrompt() {
			return this.customizationPromptList.length > 0;
		}
	},
	onLoad(options) {
		console.log('options:', options);
		const { safeAreaInsets } = uni.getSystemInfoSync()
		// 存储安全区域信息
		this.safeAreaInsets = safeAreaInsets;

		// 获取当前商家类型
		const companyInfo = uni.getStorageSync('companyInfo') || {};
		this.companyInfo = companyInfo;
		this.currentMerchantType = companyInfo.businessType || this.currentMerchantType || 1;
		this.businessType = companyInfo.businessType || this.businessType;
		this.businessEntry = uni.getStorageSync('businessEntry');
		// 获取胶囊按钮信息并计算位置（px）
		try {
			const info = uni.getMenuButtonBoundingClientRect && uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = info || null;
			this.capsuleBottomPx = info && info.bottom ? info.bottom : 0;
			this.capsuleTopPx = info && info.top ? info.top : 0;
			this.capsuleHeightPx = info && info.height ? info.height : 0;
			console.log('胶囊按钮信息:', info, 'top:', this.capsuleTopPx, 'bottom:', this.capsuleBottomPx, 'height:', this.capsuleHeightPx);
		} catch (err) {
			console.warn('获取胶囊按钮信息失败:', err);
			this.menuButtonInfo = null;
			this.capsuleBottomPx = 0;
			this.capsuleTopPx = 0;
			this.capsuleHeightPx = 0;
		}

		// 缓存高度计算结果：使用自适应导航栏总高度
		this.cachedTitleHeightPx = this.getNavbarHeightPx();
		this.cachedNavHeightPx = this.rpxToPx(80);
		// 预览模式：直接从缓存加载预览数据
		if (options.mode === 'preview') {
			this.mode = 'preview';
			this.isPreviewMode = true;
			this.loadPreviewFromStorage();
			return;
		}

		// 获取spuId
		this.id = options.id || options.spuId || '';
		console.log('onLoad options:', options);
		console.log('获取到的id:', this.id);
		//获取mode
		if (options.mode === '' || options.mode === undefined) {
			// 根据商家信息自动判断mode
			const companyInfo = uni.getStorageSync('companyInfo')
			if (!companyInfo || !companyInfo.id) {
				// 未登录或非商家：客户模式
				this.mode = 'customer'
			} else {
				// 已登录商家：申请调用模式
				this.mode = 'callApply'
			}
			console.log('自动设置mode为:', this.mode)
		} else {
			this.mode = options.mode
			console.log('使用传递的mode:', this.mode)
		}
		// 初始化页面
		this.initPage();
	},

	// 页面卸载时清理定时器
	onUnload() {
		if (this.scrollTimer) {
			clearTimeout(this.scrollTimer);
			this.scrollTimer = null;
		}
	},
	methods: {
		goshop() {
			uni.navigateTo({
				url: `/public/merchant/shop2/index?spuId=${this.id}`
			})
		},
		// rpx 转 px
		rpxToPx(rpx) {
			const systemInfo = uni.getSystemInfoSync();
			const screenWidth = systemInfo.screenWidth || 375;
			return (rpx * screenWidth) / 750;
		},

		// 获取自适应导航栏高度（px）
		getNavbarHeightPx() {
			try {
				const h = this.$navbarUtil && this.$navbarUtil.getNavbarTotalHeightRpx && this.$navbarUtil.getNavbarTotalHeightRpx();
				let rpxVal = 160;
				if (typeof h === 'number') {
					rpxVal = h;
				} else if (typeof h === 'string') {
					const m = h.match(/\d+/);
					rpxVal = m ? parseInt(m[0], 10) : 160;
				}
				return this.rpxToPx(rpxVal);
			} catch (e) {
				return this.rpxToPx(160);
			}
		},
		loadPreviewFromStorage() {
			try {
				const previewData = uni.getStorageSync('previewData');
				if (previewData) {
					this.loadPreviewData(previewData);
					uni.removeStorageSync('previewData');
					} else {
					uni.showToast({
						title: '预览数据不存在',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('读取预览数据失败:', error);
				uni.showToast({
					title: '预览数据读取失败',
					icon: 'none'
				});
			}
		},
		loadPreviewData(previewData) {
			this.isPreviewMode = true;
			this.mode = 'preview';

			let customizationPrompt = [];
			const cp = previewData.customizationPrompt;
			if (Array.isArray(cp)) {
				customizationPrompt = cp;
			} else if (typeof cp === 'string') {
				const trimmed = cp.trim();
				if (trimmed && trimmed !== '[]') {
					try {
						const parsed = JSON.parse(trimmed);
						customizationPrompt = Array.isArray(parsed) ? parsed : [];
					} catch (e) {
						customizationPrompt = [];
					}
				}
			}

			let includedArray = [];
			let includedStr = '';
			if (Array.isArray(previewData.expensesIncluded)) {
				includedArray = previewData.expensesIncluded;
				includedStr = (previewData.expensesIncluded[0] && (previewData.expensesIncluded[0].alt || previewData.expensesIncluded[0].content)) || '';
			} else if (typeof previewData.expensesIncluded === 'string') {
				includedArray = previewData.expensesIncluded.trim() ? [{ title: '费用包含', alt: previewData.expensesIncluded.trim() }] : [];
				includedStr = previewData.expensesIncluded;
			}

			let excludedStr = '';
			if (Array.isArray(previewData.expensesExcluded)) {
				excludedStr = (previewData.expensesExcluded[0] && (previewData.expensesExcluded[0].alt || previewData.expensesExcluded[0].content)) || '';
			} else if (typeof previewData.expensesExcluded === 'string') {
				excludedStr = previewData.expensesExcluded;
			}

			let otherStr = '';
			if (Array.isArray(previewData.otherExpenses)) {
				otherStr = (previewData.otherExpenses[0] && (previewData.otherExpenses[0].alt || previewData.otherExpenses[0].content)) || '';
			} else if (typeof previewData.otherExpenses === 'string') {
				otherStr = previewData.otherExpenses;
			}

			this.mainInfo = {
				productSpu: {
					name: previewData.productName || '预览产品'
				},
				productSku: {
					minYearOld: previewData.minYearOld || 6,
					maxYearOld: previewData.maxYearOld || 18,
					parentsAccompanied: previewData.parentsAccompanied || 0,
					guaranteePrompt: this.convertToArrayFormat(previewData.guaranteePrompt, '保障提示'),
					riskPrompt: this.convertToArrayFormat(previewData.riskPrompt, '风险提示'),
					customizationPrompt,
					groupRules: {
						groupFormation: previewData.groupFormation || '成团说明：本次旅游团人数为24人起，如未达到成团人数，将提前3天通知并全额退款。',
						refundRules: previewData.refundRules || '退团规则：出发前7天内申请退团，扣除30%费用；出发前3天内申请退团，扣除50%费用。',
						breachClause: previewData.breachClause || '违约条款：若游客未按约定时间参加旅行或提前终止行程，将根据实际损失收取相应违约金。'
					},
					bookingInfo: previewData.bookingInfo || '请提前3天预订，预订成功后不可取消。如需改期，请提前24小时联系客服。',
					specificItinerary: previewData.specificItinerary || [],
					images: Array.isArray(previewData.images)
						? previewData.images.map(img => ({
							url: img.url || img,
							alt: img.alt || '',
							order: img.order || 0,
							width: img.width || 0,
							height: img.height || 0
						}))
						: [],
					productFeatures: previewData.productFeatures || [],
					expensesIncluded: includedArray,
					expensesExcluded: excludedStr,
					otherExpenses: otherStr
				},
				price: previewData.price || 0.0
			};

			// 🔑 将 productFeatures 和 addProductFeatures 拼接
			const productFeatures = this.mainInfo.productSku.productFeatures || [];
			const addProductFeatures = this.mainInfo.productSku.addProductFeatures || [];
			this.mergedFeatures = [...productFeatures, ...addProductFeatures];
			this.mergedItineraries = this.mainInfo.productSku.specificItinerary || [];

			const dateList = Array.isArray(previewData.dateList) ? previewData.dateList : [];
			if (dateList.length > 0) {
				this.datelist = dateList.map((item, index) => {
					const dateName = item.DateName || item.Datevalue || item.date || '';
					const normalizedDateName = dateName || '';
					const monthDay = item.Datevalue1 || (normalizedDateName ? normalizedDateName.slice(5) : '');
					return {
						...item,
						id: item.id || `preview-${index}`,
						DateName: normalizedDateName,
						Datevalue: item.Datevalue || normalizedDateName,
						Datevalue1: monthDay,
						WeekName: item.WeekName || this.getWeekName(normalizedDateName),
						price: item.price || previewData.price || 0
					};
				});
			} else {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				const dateName = `${year}-${month}-${day}`;
				this.datelist = [{
					id: 'preview-1',
					DateName: dateName,
					Datevalue: dateName,
					Datevalue1: `${month}-${day}`,
					WeekName: this.getWeekName(dateName),
					price: previewData.price || 0
				}];
			}

			this.selectedDateIndex = this.datelist.length > 0 ? 0 : -1;
			this.selectedDate = this.datelist[0] || {};
			this.tempSelectedDateIndex = this.selectedDateIndex;
			this.price = previewData.price || 0;

			this.productInfo = { mainInfo: this.mainInfo };

			this.$nextTick(() => {
				this.initElementPositions();
				setTimeout(() => {
					this.cacheSectionPositions();
				}, 300);
			});
		},
		convertToArrayFormat(data, defaultTitle) {
			if (!data) {
				return [];
			}

			const ensureObject = (item, index = 0) => {
				if (typeof item === 'string') {
					const text = item.trim();
					return text ? { title: defaultTitle, alt: text, id: `str-${index}` } : null;
				}
				if (item && typeof item === 'object') {
					const clone = { ...item };
					if (!clone.title && defaultTitle) {
						clone.title = defaultTitle;
					}
					if (!('id' in clone)) {
						clone.id = `obj-${index}`;
					}
					return this.getPromptText(clone) ? clone : null;
				}
				return null;
			};

			if (Array.isArray(data)) {
				return data
					.map((item, index) => ensureObject(item, index))
					.filter(Boolean);
			}

			if (typeof data === 'string') {
				const trimmed = data.trim();
				if (!trimmed || trimmed === '[]') {
					return [];
				}
				if ((trimmed.startsWith('[') && trimmed.endsWith(']')) || (trimmed.startsWith('{') && trimmed.endsWith('}'))) {
					try {
						const parsed = JSON.parse(trimmed);
						if (Array.isArray(parsed)) {
							return parsed
								.map((item, index) => ensureObject(item, index))
								.filter(Boolean);
						}
						if (parsed && typeof parsed === 'object') {
							const normalized = ensureObject(parsed);
							return normalized ? [normalized] : [];
				}
			} catch (e) {
						console.warn('convertToArrayFormat JSON parse failed:', e);
					}
				}
				return [{ title: defaultTitle, alt: trimmed, id: `str-${Date.now()}` }];
			}

			if (typeof data === 'object') {
				const normalized = ensureObject(data);
				return normalized ? [normalized] : [];
			}

			return [];
		},
		getPromptText(item) {
			if (!item) return '';
			if (typeof item === 'string') {
				return item.trim();
			}
			if (typeof item === 'object') {
				const value = item.alt ?? item.content ?? item.text ?? '';
				return String(value || '').trim();
			}
			return '';
		},
		exitPreview() {
			uni.navigateBack({ delta: 1 });
		},
		// 初始化页面
		initPage() {
			// 使用异步方式加载数据，避免阻塞页面渲染
			this.$nextTick(() => {
				// 获取公司信息
				this.getCompanyInfo();
			});
		},
		//轮播图变化
		onBannerChange(e) {
			this.activeIndex = e.detail.current + 1
		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values,// values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPickerRef
			} = e;
			console.log('changeHandler:', e);
			if (columnIndex === 0) {
				picker.setColumnValues(1, this.columnData[index]);
			}
		},
		confirm(e) {
			console.log('confirm', e);
			// 将选择的省市值赋给applyPeriod.saleArea
			if (e && e.value && e.value.length >= 2) {
				this.applyPeriod.saleArea = e.value[0] + '-' + e.value[1];
				console.log('选择的销售区域:', this.applyPeriod.saleArea);
				// 选择完成后继续申请营期
				this.continueApply();
			}
			this.show = false;
		},
		cancel() {
			console.log('取消选择销售区域');
			this.show = false;
			// 取消时不执行申请营期操作
		},
		// 初始化多级选择器数据
		initPickerData() {
			// 获取第一个省份对应的城市数据
			const firstProvince = this.columns[0][0];
			const firstCities = this.columnData[firstProvince] || [];

			// 更新columns数据，确保第二列有初始数据
			this.columns = [
				['河南省', '广东省', '北京市', '上海市', '江苏省', '浙江省', '山东省', '湖北省', '湖南省', '四川省'],
				firstCities
			];

			console.log('初始化选择器数据:', this.columns);
		},
		//申请营期
		async callApply() {
			//查询一下是否是商家(是否有商家信息) 不是商家则弹出消息请先注册成为商家//TODO

			// 初始化多级选择器数据
			this.initPickerData();

			// 弹出多级联动选择框选择销售区域
			this.show = true;

			// 等待用户选择完成后再继续执行
			// 注意：这里的逻辑会在confirm方法中继续处理
		},

		// 确认选择销售区域后继续申请营期
		async continueApply() {
			this.applyPeriod.spuId = this.mainInfo.productSpu?.id || ''
			this.applyPeriod.skuId = this.mainInfo.productSku?.id || ''
			this.applyPeriod.periodId = this.selectedDate.id
			this.applyPeriod.sourceMerchantType = this.originCompanyInfo.businessType
			this.applyPeriod.targetMerchantType = this.companyInfo.businessType
			this.applyPeriod.sourceMerchantId = this.originCompanyInfo.id
			this.applyPeriod.targetMerchantId = this.companyInfo.id
			this.applyPeriod.salePrice = this.price

			//调用接口
			const res = await applyPeriod(this.applyPeriod)
			if (res.code === 200) {
				//清空数据
				this.applyPeriod = {
					spuId: '',
					skuId: '',
					periodId: '',
					sourceMerchantId: '',
					sourceMerchantType: '',
					targetMerchantId: '',
					targetMerchantType: '',
					applyReason: '',
					salePrice: '',
					saleArea: ''
				}
				this.price = ''
				this.selectedDate = ''
				this.companyInfo = {}
				this.originCompanyInfo = {}
				//延迟0.5s跳转
				setTimeout(() => {
					uni.showToast({
						title: '申请成功',
						icon: 'success'
					})
				}, 500)
				uni.navigateBack()
				} else {
				uni.showToast({
					title: res.message,
					icon: 'error'
				})
			}
		},
		// 获取公司信息
		async getCompanyInfo() {
			try {
				console.log('获取商家信息 - SpuId:', this.id);

				// 检查spuId是否存在
				if (!this.id) {
					console.error('spuId不存在，无法获取商家信息');
					// 不阻塞页面加载，只是提示
					setTimeout(() => {
						uni.showToast({
							title: '产品ID不存在',
							icon: 'none'
						});
					}, 500);
					return;
				}

				const res = await request({
					url: `/merchant/getMerchant?spuId=${this.id}`,
					method: 'GET',
					loading: false // 关闭loading，避免阻塞
				});

				console.log('商家信息响应:', res);

				if (res.code === 200 && res.data) {
					this.originCompanyInfo = res.data;
					console.log('商家信息获取成功:', this.originCompanyInfo);
					// 继续获取营期信息
					this.getPeriod();
				} else {
					console.error('获取商家信息失败 - 响应码:', res.code, '消息:', res.message);
					// 延迟显示提示，不阻塞页面
					setTimeout(() => {
						uni.showToast({
							title: res.message || '获取公司信息失败',
							icon: 'none',
							duration: 2000
						});
					}, 500);
				}
			} catch (error) {
				console.error('获取公司信息网络错误:', error);
				// 延迟显示提示，不阻塞页面
				setTimeout(() => {
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none',
						duration: 2000
					});
				}, 500);
			}
		},

		// 获取营期信息
		async getPeriod() {
			try {
				const originCompanyInfo = this.originCompanyInfo;

				const res = await request({
					url: `/period-sku/getPeriods?spuId=${this.id}&merchantId=${originCompanyInfo.id}&merchantType=${originCompanyInfo.businessType}`,
					method: 'GET',
					loading: false // 关闭loading，避免阻塞
				});

				if (res.code === 200 && res.data) {
					console.log('营期数据:', res.data);
					this.periodList = res.data;

					// 提取日期列表
					this.extractDateList();

					// 获取产品详细信息
					this.getInfo();
					} else {
					console.error('获取营期信息失败:', res);
					// 延迟显示提示
					setTimeout(() => {
						uni.showToast({
							title: res.message || '获取营期信息失败',
							icon: 'none',
							duration: 2000
						});
					}, 500);
				}
			} catch (error) {
				console.error('获取营期信息失败:', error);
				// 延迟显示提示
				setTimeout(() => {
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none',
						duration: 2000
					});
				}, 500);
			}
		},

		// 提取日期列表
		extractDateList() {
			if (this.periodList && this.periodList.length > 0) {
				let datelist = [];
				const firstPeriod = this.periodList[0];

				// 处理不同来源的日期数据
				if (firstPeriod.p3s && firstPeriod.p3s.length > 0) {
					firstPeriod.p3s.forEach(dateItem => {
						this.addDateToList(dateItem, datelist);
					});
				} else if (firstPeriod.p2s && firstPeriod.p2s.length > 0) {
					firstPeriod.p2s.forEach(dateItem => {
						this.addDateToList(dateItem, datelist);
					});
				} else if (firstPeriod.p1s && firstPeriod.p1s.length > 0) {
					firstPeriod.p1s.forEach(dateItem => {
						this.addDateToList(dateItem, datelist);
					});
				}

				this.datelist = datelist;
				console.log('提取的日期列表:', this.datelist);
			}
		},

		// 添加日期到列表
		addDateToList(dateItem, datelist) {
			const dateInfo = dateItem.availableDate;
			if (dateInfo) {
				let date = {
					DateName: `${dateInfo.yearDate}-${dateInfo.monthDate}-${dateInfo.dayDate}`,
					date: `${dateInfo.monthDate}-${dateInfo.dayDate}`,
					Datevalue: `${dateInfo.yearDate}-${dateInfo.monthDate}-${dateInfo.dayDate}`,
					Datevalue1: `${dateInfo.monthDate}-${dateInfo.dayDate}`,
					WeekName: dateInfo.weekDate,
					id: dateItem.id
				};
				datelist.push(date);
			}
		},

		// 获取产品详细信息
		async getInfo() {
			try {
				const merchantType = this.originCompanyInfo.businessType || 1;
				console.log('获取产品详情 - ProductID:', this.id, 'MerchantType:', merchantType, 'CompanyInfo:', this.originCompanyInfo);

				const res = await request({
					url: `/product-spu/getProduct?id=${this.id}&merchantType=${merchantType}`,
					method: 'GET',
					loading: false // 关闭loading，避免阻塞
				});

				console.log('产品详细数据:', res.data);

				if (res.code !== 200 || !res.data) {
					throw new Error(res.message || '获取产品详情失败');
				}
				// // 获取服务商信息
				// const merchantDetail = await request({
				// 	url: `/merchant/getMerchant?spuId=${res.productSpu.merchantId}`,
				// 	method: 'GET',
				// 	loading: false // 关闭loading，避免阻塞
				// });
				// console.log('merchantDetail',merchantDetail)
				// 🔑 根据当前商家类型决定应该使用哪个数据源，并提取对应的productType
				// B2商家（merchantType=2）-> 查看B1的产品 -> 使用p1数据
				// B3商家（merchantType=3）-> 查看B2的产品 -> 使用p2数据
				// 用户（无merchantType）-> 查看B3的产品 -> 使用p3数据
				if (this.currentMerchantType === 2) {
					//优先级P3>P2>P1
					this.productType = res.data.p3?.productSpu?.productType || res.data.p2?.productSpu?.productType||res.data.p1?.productSpu?.productType;
					console.log('✅ B2查看产品 - productType:', this.productType);
				} else if (this.currentMerchantType === 3) {
					// B3商家应该看到B2的产品（p2数据）
					this.productType = res.data.p3?.productSpu?.productType || res.data.p2?.productSpu?.productType||res.data.p1?.productSpu?.productType;
			
					console.log('✅ B3商家查看B2产品 - productType:', this.productType);
					} else {
					// 用户应该看到B3的产品（p3数据）
					this.productType = res.data.p3?.productSpu?.productType
						|| res.data.p2?.productSpu?.productType
						|| res.data.p1?.productSpu?.productType
						|| '';
					console.log('✅ 用户查看产品 - productType:', this.productType);
				}

				// 使用productUtil.js处理数据
				const processedData = this.processProductData(res.data);
				console.log('处理后的数据processedData:', processedData);
				// 确保数据被正确赋值
				this.productInfo = processedData;
				this.mainInfo = processedData.mainInfo || {};
				// 🔑 将 productFeatures 和 addProductFeatures 拼接
				const productFeatures = processedData.mainInfo?.productSku?.productFeatures || [];
				const addProductFeatures = processedData.mainInfo?.productSku?.addProductFeatures || [];
				this.mergedFeatures = [...productFeatures, ...addProductFeatures];
				this.mergedItineraries = processedData.mainInfo?.productSku?.specificItinerary || [];
				// 展开第一天行程
				if (this.mergedItineraries && this.mergedItineraries.length > 0) {
					this.mergedItineraries[0].show = true;
				}

				console.log('数据处理完成，mainInfo:', this.mainInfo);
				console.log('mergedFeatures:', this.mergedFeatures);
				console.log('mergedItineraries:', this.mergedItineraries);
				console.log('轮播图图片数据:', this.mainInfo.productSku?.images);
				console.log('productSku完整数据:', this.mainInfo.productSku);

				// 数据加载完成后初始化元素位置
				this.$nextTick(() => {
					this.initElementPositions();
					// 延迟一点时间再次缓存位置，确保DOM完全渲染
					setTimeout(() => {
						this.cacheSectionPositions();
					}, 500);
				});
			} catch (error) {
				console.error('获取产品详细信息失败:', error);
				uni.showToast({
					title: '网络异常，请重试',
					icon: 'none'
				});
			}
		},

		// 初始化元素位置
		initElementPositions() {
			const query = uni.createSelectorQuery().in(this);

			// 获取产品标题容器的位置
			query.select('#title-container').boundingClientRect((rect) => {
				if (rect) {
					this.titleOriginalTop = rect.top + this.scrollTop;
					console.log('产品标题原始位置:', this.titleOriginalTop);
				}
			});

			// 使用锚点测量导航栏原始位置（导航初始隐藏时也可测量）
			query.select('#nav-anchor').boundingClientRect((rect) => {
				if (rect) {
					this.navOriginalTop = rect.top + this.scrollTop;
					console.log('导航栏原始位置(nav-anchor):', this.navOriginalTop);
				}
			});

			// 缓存所有区域的位置信息，避免频繁查询
			this.cacheSectionPositions();

			query.exec();
		},

		// 缓存区域位置信息
		cacheSectionPositions() {
			const query = uni.createSelectorQuery().in(this);
			const sectionIds = this.navItems.map(item => item.id);

			query.selectAll(sectionIds.map(id => `#${id}`).join(',')).boundingClientRect((rects) => {
				if (rects && rects.length > 0) {
					this.sectionPositions = rects.map((rect, index) => ({
						id: sectionIds[index],
						top: rect ? rect.top + this.scrollTop : 0,
						height: rect ? rect.height : 0
					}));
					console.log('缓存区域位置:', this.sectionPositions);
				}
			});
			query.exec();
		},

		// 使用productUtil.js处理产品数据
		processProductData(data) {
			try {
				// 确保data有正确的结构
				if (!data) {
					console.warn('数据为空');
						return {
						mainInfo: {},
						mergedFeatures: [],
						mergedItineraries: []
					};
				}

				// 如果API已经返回处理好的数据，直接返回
				if (data.mainInfo && data.mergedFeatures && data.mergedItineraries) {
					console.log('API已返回处理好的数据');
					// 确保mergedFeatures数组不包含undefined或null元素
					const productFeatures = data.mergedFeatures.filter(item => item);
					// 🔑 将 productFeatures 和 addProductFeatures 拼接
					const addProductFeatures = (data.mainInfo?.productSku?.addProductFeatures || []).filter(item => item);
					data.mergedFeatures = [...productFeatures, ...addProductFeatures];
					return data;
				}

				// 定义结果数据结构
				const result = {
					mainInfo: {},
					mergedFeatures: [],
					mergedItineraries: []
				};

				// 🔑 使用已经根据商家类型提取好的 productType
				// this.productType 已在 getInfo() 方法中根据 currentMerchantType 正确设置
				const productType = this.productType;

				console.log('📦 processProductData - 使用的productType:', productType, '当前商家类型:', this.currentMerchantType);

				// 检查数据结构并使用mergeAllProducts处理
				if (data.data && Array.isArray(data.data)) {
					// 如果data.data是数组，直接使用mergeAllProducts处理
					console.log('使用mergeAllProducts处理数组数据，productType:', productType);
					const mergedProducts = mergeAllProducts(data.data, productType);

					if (mergedProducts && mergedProducts.length > 0) {
						// 通常情况下，我们只需要第一个产品的数据
						const firstProduct = mergedProducts[0];

						// 提取需要的数据
						result.mainInfo = firstProduct.mainInfo || {};
						// 🔑 将 productFeatures 和 addProductFeatures 拼接
						const productFeatures = (firstProduct.mergedFeatures || []).filter(item => item);
						const addProductFeatures = (firstProduct.mainInfo?.productSku?.addProductFeatures || []).filter(item => item);
						result.mergedFeatures = [...productFeatures, ...addProductFeatures];
						result.mergedItineraries = firstProduct.mergedItineraries || [];
					}
				} else if (data.p1 || data.p2 || data.p3) {
					// 如果数据直接包含p1、p2、p3，将其包装成数组后处理
					console.log('使用mergeAllProducts处理单产品数据，productType:', productType);
					const mergedProducts = mergeAllProducts([data], productType);

					if (mergedProducts && mergedProducts.length > 0) {
						const firstProduct = mergedProducts[0];

						result.mainInfo = firstProduct.mainInfo || {};
						// 🔑 将 productFeatures 和 addProductFeatures 拼接
						const productFeatures = (firstProduct.mergedFeatures || []).filter(item => item);
						const addProductFeatures = (firstProduct.mainInfo?.productSku?.addProductFeatures || []).filter(item => item);
						result.mergedFeatures = [...productFeatures, ...addProductFeatures];
						result.mergedItineraries = firstProduct.mergedItineraries || [];
					}
				} else {
					// 对于不包含p1/p2/p3的情况，仍然尝试提取基础信息
					console.log('数据结构不包含p1/p2/p3，尝试提取基础信息');
					result.mainInfo = {
						productSpu: data.productSpu || {},
						productSku: data.productSku || {},
						price: data.price || 0
					};
				}

				return result;
			} catch (error) {
				console.error('处理产品数据失败:', error);
				return {
					mainInfo: {},
					mergedFeatures: [],
					mergedItineraries: []
				};
			}
		},
		// 服务商显示判断
		handleServiceInfoShow() {
			let { productType } = this;
			if (productType == 1) return 1
			if (productType == 2 || productType == 3 || productType == 4) return 2
			if (productType == 5) return 3
		},
		// 获取服务商前缀
		getServiceProviderPrefix() {
			const prefixMap = {
				1: '泛营地接待',
				2: '综合研学业务',
				3: '目的地接待',
				4: '组团业务',
				5: '研学活动'
			};
			return prefixMap[this.productType] || '';
		},
		// 提取地址中的市名（与 ProductCard getTags 逻辑一致）
		getCityFromAddress() {
			const productType = Number(this.productType) || 0;
			
			// 根据 productType 判断商家类型来选择地址来源
			// productType === 1,3目的地接待或者泛营地接待，取 mergedItineraries 地址
			// productType === 2, 4, 5：组团与综合研学与研学活动，取 saleArea
			if (productType === 1 || productType === 3) {
				// 目的地接待或者泛营地接待：从 mergedItineraries 获取地址，只显示市名并去掉"市"字
				const address = this.mergedItineraries && this.mergedItineraries[0] && 
					this.mergedItineraries[0].details && this.mergedItineraries[0].details[0] && 
					this.mergedItineraries[0].details[0].items && this.mergedItineraries[0].details[0].items[0] ? 
					this.mergedItineraries[0].details[0].items[0].address : null;
				if (address && address !== '未提供地址') {
					// 提取市名：例如 "福建省漳州市" -> "漳州"
					let cityName = address;
					// 如果包含"市"，提取第一个"市"字前面的部分
					if (cityName.includes('市')) {
						const cityIndex = cityName.indexOf('市');
						if (cityIndex > 0) {
							// 提取"市"字前面的部分
							cityName = cityName.substring(0, cityIndex);
							// 去掉省、自治区等前缀，只保留市名
							// 例如 "福建省漳州" -> "漳州"
							const provinceIndex = cityName.lastIndexOf('省');
							const regionIndex = cityName.lastIndexOf('自治区');
							if (provinceIndex >= 0) {
								cityName = cityName.substring(provinceIndex + 1);
							} else if (regionIndex >= 0) {
								cityName = cityName.substring(regionIndex + 2);
							}
						}
					}
					return cityName;
				}
				return '';
			} else if ([2, 4, 5].includes(productType)) {
				// 组团与综合研学与研学活动（productType 2,4,5）
				const saleAreaRaw = this.mainInfo?.saleArea || this.mainInfo?.productSku?.saleArea || '';
				// 组团与综合研学与研学活动（productType = 2, 4，5）：显示区级，例如 "福建省漳州市龙文区" -> "龙文"
				const areaProcessed = this.extractDistrictLevel(saleAreaRaw);
				return areaProcessed;
			} else {
				// 如果 productType 无法识别，使用默认逻辑（二类商家逻辑）
				const saleAreaRaw = this.mainInfo?.saleArea || this.mainInfo?.productSku?.saleArea || '';
				const saleAreaProcessed = this.extractSaleAreaCity(saleAreaRaw);
				if (saleAreaProcessed) {
					return saleAreaProcessed;
				} else {
					// 如果为待设置，多判断一层，检查是否存在 mergedItineraries 地址
					const address = this.mergedItineraries && this.mergedItineraries[0] && 
						this.mergedItineraries[0].details && this.mergedItineraries[0].details[0] && 
						this.mergedItineraries[0].details[0].items && this.mergedItineraries[0].details[0].items[0] ? 
						this.mergedItineraries[0].details[0].items[0].address : null;
					if (address && address !== '未提供地址') {
						// 提取市名：例如 "福建省漳州市" -> "漳州"
						let cityName = address;
						if (cityName.includes('市')) {
							const cityIndex = cityName.indexOf('市');
							if (cityIndex > 0) {
								cityName = cityName.substring(0, cityIndex);
								const provinceIndex = cityName.lastIndexOf('省');
								const regionIndex = cityName.lastIndexOf('自治区');
								if (provinceIndex >= 0) {
									cityName = cityName.substring(provinceIndex + 1);
								} else if (regionIndex >= 0) {
									cityName = cityName.substring(regionIndex + 2);
								}
							}
						}
						return cityName;
					}
				}
				return '';
			}
		},
		// 获取产品类型后缀（接待/接送）
		getProductTypeSuffix() {
			const type = Number(this.productType);
			if ([1, 3].includes(type)) {
				return '接待';
			}
			if ([2, 4].includes(type)) {
				return '接送';
			}
			return '';
		},
		
		// 提取区级地址（用于 productType = 2, 4, 5 组团与综合研学与研学活动）
		// 例如 "福建省漳州市龙文区" -> "龙文"
		extractDistrictLevel(area) {
			if (!area || typeof area !== 'string') {
				return '';
			}
			// 查找"区"或"县"的位置
			const districtIndex = area.indexOf('区');
			const countyIndex = area.indexOf('县');
			let targetIndex = -1;
			
			if (districtIndex !== -1 && countyIndex !== -1) {
				// 如果同时有"区"和"县"，取较近的一个
				targetIndex = Math.min(districtIndex, countyIndex);
			} else if (districtIndex !== -1) {
				targetIndex = districtIndex;
			} else if (countyIndex !== -1) {
				targetIndex = countyIndex;
			}
			
			if (targetIndex > 0) {
				// 提取"区"或"县"字前面的部分
				let districtName = area.substring(0, targetIndex);
				// 查找"市"的位置，取"市"后面的部分
				const cityIndex = districtName.indexOf('市');
				if (cityIndex >= 0) {
					districtName = districtName.substring(cityIndex + 1);
				} else {
					// 如果没有"市"，去掉省、自治区等前缀
					const provinceIndex = districtName.lastIndexOf('省');
					const regionIndex = districtName.lastIndexOf('自治区');
					if (provinceIndex >= 0) {
						districtName = districtName.substring(provinceIndex + 1);
					} else if (regionIndex >= 0) {
						districtName = districtName.substring(regionIndex + 2);
					}
				}
				return districtName;
			}
			return '';
		},
		
		// 提取销售区域城市（用于默认逻辑）
		extractSaleAreaCity(area) {
			if (!area || typeof area !== 'string') {
				return '';
			}
			
			let normalized = area.replace(/[\/|,，]/g, ' ').trim();
			if (!normalized) {
				return '';
			}
			
			const segments = normalized.split(/\s+/).filter(Boolean);
			if (segments.length >= 2) {
				return segments.slice(-2).join(' ');
			}
			
			const provinceMatch = normalized.match(/(.+?(省|自治区|特别行政区))/);
			if (provinceMatch) {
				const rest = normalized.substring(provinceMatch[0].length).trim();
				if (rest) {
					return rest;
				}
			}
			
			return normalized;
		},

		handleDateCardClick(date) {
			if (!date) {
				return
			}
			this.onDateChange(date)
		},

		// 营期选择变更
		onDateChange(selectedDate) {
			console.log('选择的日期:', selectedDate);
			// 这里可以根据选择的日期更新产品信息
			this.selectedDateIndex = this.datelist.findIndex(item => item.id === selectedDate.id);
			this.selectedDate = selectedDate;
			let period3 = {}
			console.log('selectedDate.DateName.', selectedDate.DateName)
			const date = selectedDate.DateName.split('-');
			this.periodList[0].p3s?.forEach(item => {
				if (item.id === selectedDate.id) {
					period3 = item;
				}
			})
			console.log('period3:', period3)
			// 用户选择的营期都是p3研学活动的营期，因为用户只能看到研学活动，所以选择的营期的totalPrice就是最终价格
			this.price = period3?.totalPrice || period3?.price || 0;
			console.log('价格', this.price);
		},

		// 显示营期选择弹出层
		showDateModal() {
			this.tempSelectedDateIndex = this.selectedDateIndex;
			this.showDatePopup = true;
		},

		// 关闭营期选择弹出层
		closeDateModal() {
			this.showDatePopup = false;
			this.tempSelectedDateIndex = -1;
		},

		// 在弹出层中选择营期
		selectDate(date, index) {
			this.tempSelectedDateIndex = index;
		},

		// 确认营期选择
		confirmDateSelection() {
			if (this.tempSelectedDateIndex >= 0) {
				const selectedDate = this.datelist[this.tempSelectedDateIndex];
				// 更新选中索引（需要在displayDateList中找到对应的索引）
				this.selectedDateIndex = this.tempSelectedDateIndex;
				// 触发营期变更事件
				this.onDateChange(selectedDate);
			}
			this.closeDateModal();
		},

		// 获取营期价格
		getPeriodPrice(date) {
			if (this.isPreviewMode) {
				return (date && date.price) || this.price || 0;
			}

			if (!this.periodList || this.periodList.length === 0) {
				return 0;
			}

			// 用户选择的营期都是p3研学活动的营期，只需要返回p3的totalPrice
			if (this.periodList[0].p3s) {
				const period3 = this.periodList[0].p3s.find(item => item.id === date.id);
				if (period3) {
					return period3.totalPrice || period3.price || 0;
				}
			}

			return 0;
		},

		getPeriodPriceParts(date) {
			const price = Number(this.getPeriodPrice(date)) || 0
			const fixed = price.toFixed(2)
			const [intPart, decPart] = fixed.split('.')
			return { int: intPart, dec: decPart || '00' }
		},

		// 格式化月日显示
		formatMonthDay(dateString) {
			const parts = dateString.split('-')
			if (parts.length >= 3) {
				return `${parts[1]}/${parts[2]}`
			}
			return dateString
		},

		// 格式化年份显示
		formatYear(dateString) {
			const parts = dateString.split('-')
			if (parts.length >= 1) {
				return `${parts[0]}年`
			}
			return dateString
		},

		getWeekName(dateStr) {
			if (!dateStr) return ''
			const map = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
			const normalized = dateStr.replace(/\./g, '-').replace(/\//g, '-')
			const date = new Date(normalized.replace(/-/g, '/'))
			if (Number.isNaN(date.getTime())) {
				return ''
			}
			return map[date.getDay()]
		},


		formatDate(val) {
			if (!val) return '';
			if (typeof val === 'string') {
				return val.split(' ')[0]; // 保留日期
			}
			if (val instanceof Date) {
				return val.toISOString().slice(0, 19).replace('T', ' ');
			}
			return val;
		},

		// 格式化时间为HH:MM格式
		formatTime(val) {
			if (!val) return '';
			if (typeof val === 'string') {
				// 如果是完整的时间字符串，提取时间部分
				const timeMatch = val.match(/(\d{2}:\d{2})/);
				return timeMatch ? timeMatch[1] : val;
			}
			return val;
		},

		// 根据活动标题获取图标
		getActivityIcon(title) {
			if (!title) return '●';
			const titleLower = title.toLowerCase();
			if (titleLower.includes('集散') || titleLower.includes('集合')) return '🏠';
			if (titleLower.includes('交通') || titleLower.includes('出发')) return '🚗';
			if (titleLower.includes('活动') || titleLower.includes('体验') || titleLower.includes('插秧')) return '🌱';
			if (titleLower.includes('用餐') || titleLower.includes('餐')) return '🍽️';
			if (titleLower.includes('住宿') || titleLower.includes('休息')) return '🛏️';
			return '●';
		},
		// 获取地址名称（拆分后的第二部分，显示在上面）
		getAddressName(address) {
			if (!address) return '';
			if (address.includes('-')) {
				const parts = address.split('-');
				return parts[1] ? parts[1].trim() : '';
			}
			return '';
		},

		// 获取地址位置（拆分后的第一部分，显示在下面）
		getAddressLocation(address) {
			if (!address) return '';
			if (address.includes('-')) {
				const parts = address.split('-');
				return parts[0].trim();
			}
			return address; // 如果没有"-"，返回原地址
		},
		// 切换折叠状态
		toggleFold() {
			this.isFold = !this.isFold;
		},

		// 切换天行程显示
		toggleDay(index) {
			if (this.mergedItineraries && this.mergedItineraries[index]) {
				this.mergedItineraries[index].show = !this.mergedItineraries[index].show;
				// 内容高度改变后重新缓存位置信息
				this.$nextTick(() => {
					this.cacheSectionPositions();
				});
			}
		},

		// 切换卡片折叠状态
		toggleCard(cardType) {
			this.cardFoldStates[cardType] = !this.cardFoldStates[cardType];
			// 内容高度改变后重新缓存位置信息
			this.$nextTick(() => {
				this.cacheSectionPositions();
			});
		},

		// 轮播图变更
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},

		// 预览图片
		previewImage(url) {
			uni.previewImage({
				urls: [url]
			});
		},

		// 获取详情图标 - 使用uview图标名称
		getDetailIcon(type) {
			const iconMap = {
				'交通': 'car',
				'住宿': 'home',
				'餐饮': 'food',
				'活动': 'activity',
				'景点': 'map-pin'
			};
			return iconMap[type] || 'circle';
		},

		// 获取详情类型文本
		getDetailTypeText(type) {
			const typeMap = {
				'交通': '交通',
				'住宿': '住宿',
				'餐饮': '餐饮',
				'活动': '活动',
				'景点': '景点'
			};
			return typeMap[type] || '';
		},

		// 滚动到指定区域
		goToFloor(index) {
			this.navActive = index;
			this.floorNum = `f${index}`;
			this.scrollToId = `f${index}`;

			// 滚动后清空，防止无法重复触发
			setTimeout(() => {
				this.scrollToId = '';
			}, 500);
		},

		// 监听滚动
		scrollFloor(e) {
			// 可以根据滚动位置更新导航状态
			const scrollTop = e.detail.scrollTop;
			// 计算当前可视区域的主要内容，更新导航状态
			const query = uni.createSelectorQuery();
			query.selectAll('.product-section, .itinerary-section, .service-section, .notice-section').boundingClientRect();
			query.exec((res) => {
				if (res && res[0]) {
					for (let i = res[0].length - 1; i >= 0; i--) {
						if (res[0][i].top <= 100) {
							this.navActive = i;
							break;
						}
					}
				}
			});
		},

		// 返回上一页
		backPage() {
			uni.navigateBack();
		},

		// 返回首页
		toHome() {
			uni.switchTab({
				url: '/pages/customer/index/index'
			});
		},

		// 底部操作栏方法
		// 返回首页
		goHome() {
			uni.switchTab({
				url: '/pages/customer/index/index'
			});
		},

		// 咨询功能
		consultation() {
			uni.showModal({
				title: '咨询',
				content: '是否要联系客服？',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: '400-123-4567' // 替换为实际客服电话
						});
					}
				}
			});
		},

		// 转发产品
		shareProduct() {
			uni.showShareMenu({
				withShareTicket: true,
				success: () => {
					console.log('分享成功');
				},
				fail: () => {
			uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			});
		},

		// 立即预订 - 跳转到订单创建页面
		bookNow() {
			// 检查是否已选择营期
			if (this.selectedDateIndex === -1) {
			uni.showToast({
					title: '请先选择营期',
					icon: 'none'
				});
				return;
			}

			// 三类商家从分类页进入（callApply）时：进入营期创建页
			if (this.mode === 'callApply' && Number(this.businessType) === 3) {
				const spuId = this.id || (this.mainInfo.productSpu && this.mainInfo.productSpu.id) || '';
				uni.navigateTo({ url: `/public/period/periodCreate?id=${spuId}&isApplyCall=true` });
				return;
			}

			uni.showModal({
				title: '立即预订',
				content: `确认预订此产品（¥${this.price || '0.00'} CNY）？`,
				success: (res) => {
					if (res.confirm) {
						// 根据选择的营期获取p1sId、p2sId、p3sId
						const selectedDate = this.selectedDate;
						const dateStr = selectedDate.DateName.split('-');

						let p1sId = '';
						let p2sId = '';
						let p3sId = selectedDate.id; // p3sId就是选择的营期ID

						// 查找对应的p2sId
						if (this.periodList[0]?.p2s) {
							const period2 = this.periodList[0].p2s.find(item =>
								item.availableDate.yearDate === parseInt(dateStr[0]) &&
								item.availableDate.monthDate === parseInt(dateStr[1]) &&
								item.availableDate.dayDate === parseInt(dateStr[2])
							);
							if (period2) {
								p2sId = period2.id;
							}
						}

						// 查找对应的p1sId
						if (this.periodList[0]?.p1s) {
							const period1 = this.periodList[0].p1s.find(item =>
								item.availableDate.yearDate === parseInt(dateStr[0]) &&
								item.availableDate.monthDate === parseInt(dateStr[1]) &&
								item.availableDate.dayDate === parseInt(dateStr[2])
							);
							if (period1) {
								p1sId = period1.id;
							}
						}

						console.log('传递的营期信息:', { p1sId, p2sId, p3sId, selectedDate });

						// 跳转到订单创建页面，传递营期信息
						uni.navigateTo({
							url: `/public/order/createOrder?spuId=${this.id}&p1sId=${p1sId}&p2sId=${p2sId}&p3sId=${p3sId}`,
							success: () => {
								uni.showToast({
									title: '跳转到订单页面',
									icon: 'success'
								});
							},
							fail: (err) => {
								console.error('跳转失败:', err);
								uni.showToast({
									title: '跳转失败',
									icon: 'error'
								});
							}
						});
					}
				}
			});
		},

		// 申请调用 - 跳转到产品编辑页面
		async applyForCall() {

			uni.showModal({
				title: '申请调用',
				content: `确认申请调用此产品?`,
				success: async (res) => {
					console.log('res', res)
					if (res.confirm) {
						try {
							// 根据选择的营期获取相关信息
							const selectedDate = this.selectedDate;

							console.log('✅ 选中的营期:', selectedDate);
							console.log('selectedDate.DateName:', selectedDate.DateName);

							// 使用选中的营期ID作为sourcePeriodId
							const sourcePeriodId = selectedDate.id;

							// 获取SKU ID和SPU ID
							const skuId = this.mainInfo.productSku?.id || '';
							const spuId = this.mainInfo.productSpu?.id || '';
							const sourceMerchantId = this.originCompanyInfo?.id || '';
							const sourceMerchantType = this.originCompanyInfo?.businessType || 1; // 源商家类型

							// 从缓存中获取入口标识
							const businessEntry = uni.getStorageSync('businessEntry') || '';

							console.log('✅ 传递的营期信息（申请调用）:', {
								spuId,
								skuId,
								sourcePeriodId,
								sourceMerchantId,
								sourceMerchantType,
								price: this.price,
								productType: this.productType,
								businessEntry
							});

							// 跳转到产品编辑页面
					uni.navigateTo({
								url: `/public/create/index?id=${spuId}&skuId=${skuId}&sourcePeriodId=${sourcePeriodId}&sourceMerchantId=${sourceMerchantId}&sourceMerchantType=${sourceMerchantType}&isApplyCall=true&price=${this.price}&productType=${this.productType}`,
								success: () => {
									uni.showToast({
										title: '跳转到编辑页面',
										icon: 'success'
									});
								},
								fail: (err) => {
									console.error('跳转失败:', err);
									uni.showToast({
										title: '跳转失败',
										icon: 'error'
									});
								}
							});
						} catch (error) {
							console.error('申请调用失败:', error);
							uni.showToast({
								title: '申请调用失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},

		// 切换预定须知项目展开状态
		toggleNoticeItem(itemType) {
			this.noticeItemStates[itemType] = !this.noticeItemStates[itemType];
		},

		// 切换自定义提示单条展开状态（确保响应式）
		toggleCustomizationItem(index) {
			const key = 'customization_' + index;
			this.$set(this.noticeItemStates, key, !this.noticeItemStates[key]);
		},

		// 切换条款项目展开状态
		toggleTermsItem(itemType) {
			this.termsItemStates[itemType] = !this.termsItemStates[itemType];
		},

		// 与 productInfoView 一致：是否显示成团/退团/违约条款
		shouldShowGroupRules() {
			const isBusinessType2 = (this.productType !== 1);
			const isDestinationReception = this.businessEntry === 'dest_receive'
				|| this.businessEntry === '目的地接待业务'
				|| this.businessEntry === 'destination_reception'
				|| this.businessEntry === 'destinationReception'
				|| (this.businessEntry && this.businessEntry.includes('目的地接待'))
				|| (this.businessEntry && this.businessEntry.includes('接待'));

			if (!isBusinessType2) {
				return false;
			}
			if (isDestinationReception) {
				return false;
			}
			return true;
		},

		// 传给渠道客户
		transferToChannel() {
			uni.showModal({
				title: '传给渠道客户',
				content: `确认将产品（¥${this.price || '0.00'} CNY）传给渠道客户？`,
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '已传给渠道客户',
							icon: 'success'
						});
					}
				}
			});
		},

		// 加入列表
		addToList() {
			uni.showToast({
				title: '已加入列表',
				icon: 'success'
			});
		},

		// 创建订单
		createOrder() {
			console.log('创建订单', this.periodList);
			console.log('创建订单', this.selectedDateIndex);
			if (this.selectedDateIndex === -1 && this.datelist.length > 0) {
				uni.showToast({
					title: '请先选择营期',
					icon: 'none'
				});
				return;
			}
			// 根据日期获取p1sId、p2sId、p3sId
			const p3sId = this.selectedDate.id;
			const date = this.selectedDate.DateName.split('-');
			// 根据selectedDate的日期在periodList中查找p1sId、p2sId
			// const period2 = this.periodList.p2s.filter(item => item.availableDate.yearDate === date[0] && item.availableDate.monthDate === date[1] && item.availableDate.dayDate === date[2]);
			let period2 = {}
			this.periodList[0].p2s.forEach(item => {
				if (item.availableDate.yearDate === date[0] && item.availableDate.monthDate === date[1] && item.availableDate.dayDate === date[2]) {
					period2 = item;
				}
			})
			const p2sId = period2.id;
			let period1 = {}
			this.periodList[0].p1s.forEach(item => {
				if (item.availableDate.yearDate === date[0] && item.availableDate.monthDate === date[1] && item.availableDate.dayDate === date[2]) {
					period1 = item;
				}
			})
			const p1sId = period1.id;
			console.log('p1sId', p1sId);
			console.log('p2sId', p2sId);
			console.log('p3sId', p3sId);
			// 跳转到订单页面
			uni.navigateTo({
				url: `/public/order/createOrder?spuId=${this.id}&p1sId=${p1sId}&p2sId=${p2sId}&p3sId=${p3sId}`,
			});
		},

		// 滚动监听（优化版本，使用节流）
		onScroll(e) {
			// 如果正在执行滚动动画，跳过部分更新以减少卡顿
			if (this.isScrollingToTarget) {
				return;
			}

			const scrollTop = e.detail.scrollTop;
			this.scrollTop = scrollTop;

			// 使用节流避免过于频繁的计算
			if (this.scrollTimer) {
				clearTimeout(this.scrollTimer);
			}

			// 立即更新吸顶状态（这个计算很轻量）
			this.updateStickyStates(scrollTop);

			// 节流更新导航状态（这个计算较重）
			this.scrollTimer = setTimeout(() => {
				this.updateActiveNavOptimized(scrollTop);
			}, 32); // 约30fps的更新频率，降低计算频率
		},

		// 更新吸顶状态（轻量计算）
		updateStickyStates(scrollTop) {
			if (this.titleOriginalTop > 0) {
				this.stickyTitle = scrollTop >= this.titleOriginalTop - 10;
			}

			if (this.navOriginalTop > 0) {
				const titleHeight = this.titleHeightPx || 0;
				this.stickyNav = scrollTop >= (this.navOriginalTop - titleHeight);
			}

			this.showAdaptiveNav = this.stickyNav;
		},

		// 更新当前激活的导航项（原版本，保留作为备用）
		updateActiveNav() {
			const query = uni.createSelectorQuery().in(this);
			const sectionIds = this.navItems.map(item => item.id);

			// 获取所有区域的位置
			query.selectAll(sectionIds.map(id => `#${id}`).join(',')).boundingClientRect((rects) => {
				if (rects && rects.length > 0) {
					let activeIndex = 0;
					// 计算吸顶元素的总高度（px）
					const titleHeight = this.stickyTitle ? this.titleHeightPx : 0;
					const navHeight = this.stickyNav ? this.navHeightPx : 0;
					const extra = this.rpxToPx(50);
					const threshold = titleHeight + navHeight + extra;

					// 找到当前可视区域对应的导航项
					for (let i = 0; i < rects.length; i++) {
						if (rects[i] && rects[i].top <= threshold) {
							activeIndex = i;
						}
					}

					this.activeNavIndex = activeIndex;
				}
			});
			query.exec();
		},

		// 优化版本的导航项更新（使用缓存的位置信息）
		updateActiveNavOptimized(scrollTop) {
			// 避免不必要的计算
			if (Math.abs(scrollTop - this.lastScrollTop) < 5) {
				return; // 滚动距离太小，不需要更新
			}
			this.lastScrollTop = scrollTop;

			if (this.sectionPositions.length === 0) {
				return; // 位置信息未缓存
			}

			let activeIndex = 0;
			// 计算吸顶元素的总高度（px）
			const titleHeight = this.stickyTitle ? this.titleHeightPx : 0;
			const navHeight = this.stickyNav ? this.navHeightPx : 0;
			const extra = this.rpxToPx(50);
			const threshold = titleHeight + navHeight + extra;

			// 使用缓存的位置信息计算当前激活的导航项
			// 使用二分查找或简单遍历来找到当前区域
			for (let i = this.sectionPositions.length - 1; i >= 0; i--) {
				const sectionTop = this.sectionPositions[i].top - scrollTop;
				if (sectionTop <= threshold) {
					activeIndex = i;
					break;
				}
			}

			// 如果存在程序滚动指定的目标索引，则优先使用该索引
			const nextIndex = this.pendingTargetIndex >= 0 ? this.pendingTargetIndex : activeIndex;
			if (this.activeNavIndex !== nextIndex) {
				this.activeNavIndex = nextIndex;
			}
		},

		// 点击导航项滚动到对应区域
		scrollToSection(sectionId) {
			if (!sectionId) return;

			// 立即更新激活的导航索引
			const targetIndex = this.navItems.findIndex(item => item.id === sectionId);
			if (targetIndex >= 0) {
				this.activeNavIndex = targetIndex;
				this.pendingTargetIndex = targetIndex; // 锁定目标索引，避免中途被误判覆盖
			}

			const query = uni.createSelectorQuery().in(this);
			query.select(`#${sectionId}`).boundingClientRect((rect) => {
				if (rect) {
					// 计算吸顶元素的总高度作为偏移量（px）
					const titleHeight = this.cachedTitleHeightPx;
					const navHeight = this.cachedNavHeightPx;
					const extra = this.rpxToPx(20);
					const offset = titleHeight + navHeight + extra;

					// 计算目标滚动位置
					const targetScrollTop = Math.max(0, rect.top + this.scrollTop - offset);

					// 标记正在程序控制滚动，避免触发过多更新
					this.isScrollingToTarget = true;

					// 使用 scroll-with-animation 实现平滑滚动
					this.programScrollTop = targetScrollTop;

					// 300ms后恢复正常状态
					setTimeout(() => {
						this.isScrollingToTarget = false;
						this.pendingTargetIndex = -1; // 清除锁定
						// 滚动完成后再次确认激活状态（防止滚动过程中被覆盖）
						this.updateActiveNavOptimized(targetScrollTop);
					}, 300);
				}
			});
			query.exec();
		}
	},

	// 微信好友分享：从底部"转发"按钮触发
	onShareAppMessage(res) {
		const spuId = this.id || (this.mainInfo.productSpu && this.mainInfo.productSpu.id) || '';
		const title = (this.mainInfo.productSpu && this.mainInfo.productSpu.name) || '产品详情';
		let imageUrl = '';
		if (this.mainInfo.productSku && this.mainInfo.productSku.images && this.mainInfo.productSku.images.length) {
			imageUrl = this.mainInfo.productSku.images[0].url || '';
		} else if (this.mainInfo.productSpu && this.mainInfo.productSpu.mainImage) {
			imageUrl = this.mainInfo.productSpu.mainImage;
		}
		return {
			title,
			path: `/public/productInfo/productInfo?spuId=${spuId}&mode=customer`,
			imageUrl
		};
	}
};
</script>

<style lang="scss" scoped>
.product-info-container {
	background: #f8f8f8;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	height: 100vh;
	/* 优化滚动性能 */
	-webkit-overflow-scrolling: touch;
	will-change: scroll-position;
}

.product-info-page {
	position: relative;
	min-height: 100vh;
	background: #f8f8f8;
}

.card-content {
	padding: 20rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

/* 返回按钮 */
.back-btn {
	position: fixed;
	top: calc(env(safe-area-inset-top) + 30rpx);
	/* 状态栏安全区域高度 + 额外间距 */
	left: 30rpx;
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	/* 半透明黑底，深一点 */
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(8rpx);
	/* 毛玻璃效果 */
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.35);
	/* 阴影增强 */
	z-index: 999;
	/* 确保在最上层 */
	transition: background 0.2s;
}

.back-btn:active {
	background: rgba(255, 255, 255, 0.75);
}


.current {
	font-size: 26rpx;
}

.split {
	font-size: 24rpx;
	margin: 0 1rpx 0 2rpx;
}

.total {
	font-size: 26rpx;
}


/* 轮播图 */
.banner-container {
	position: relative;
}

.banner-swiper {
	width: 100%;
	height: 100vw;
	/* 使用视口宽度作为高度，创建正方形 */
}

::v-deep .banner-swiper .swiper-item {
	height: 100%;
}

.banner-img-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.banner-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* 改为 contain 以完整显示图片 */
}

.banner-placeholder {
	width: 100%;
	height: 650rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
}

.banner-placeholder text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #999;
}

.banner-info-bar {
	position: absolute;
	bottom: -40rpx;
	left: -1rpx;
	right: -1rpx;
	display: flex;
	justify-content: flex-start;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	color: #fff;
	font-size: 26rpx;
	height: 106rpx;
	align-items: flex-start;
	padding-top: 30rpx;
}

.container-card {
	position: relative;
	bottom: 0rpx;
	padding-top: 66rpx;
	background: #eeeeee;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	overflow: hidden;
}

.banner-info-bar .info-item {
	display: flex;
	align-items: center;
}

/* 公共卡片 */
.card {
	margin: 20rpx 0rpx;
	padding: 30rpx;
	background: #fff;
	border-radius: 5rpx;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
}


/* 标题 */
.title {
	font-size: 34rpx;
	font-weight: bold;
	color: #222;
}

.subtitle {
	font-size: 28rpx;
	color: #888;
	margin-bottom: 20rpx;
}

/* 渠道标签和价格 */
.channel-price-tag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20rpx;
		margin-top: 20rpx;
}

.channel-tag {
	display: inline-block;
	padding: 8rpx 20rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-weight: 500;
	letter-spacing: 1rpx;
	/* 颜色通过 :style 动态绑定，与 ProductCard tag-item 保持一致 */
}

.channel-text {
	font-size: 26rpx;
	color: #666666;
	font-weight: 400;
}

.price-integer {
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
}

.price-decimal {
	font-size: 24rpx;
	font-weight: 400;
	color: #666666;
}

.section-titles {
		display: flex;
		align-items: center;
	justify-content: space-between;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-left: 20rpx;
	margin-right: 20rpx;
}

.schedule-card {
	position: relative;
	overflow: visible;
}

.section-header {
			display: flex;
			align-items: center;
	justify-content: space-between;
	padding: 0 0rpx 20rpx 0rpx;
}

.section-header__left {
	display: flex;
	align-items: center;
	font-size: 30rpx;
			font-weight: 600;
	color: #333333;
}

.section-header__right {
			display: flex;
			align-items: center;
	font-size: 24rpx;
	color: #ff6700;
}

.section-header__right text {
	margin-right: 4rpx;
}

.period-cards-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20rpx;
	padding: 20rpx 30rpx 20rpx 0rpx;
}

.period-cards-scroll {
	flex: 1;
	display: flex;
	gap: 15rpx;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.period-cards-scroll::-webkit-scrollbar {
		display: none;
		height: 0;
		width: 0;
	}

.period-card {
	position: relative;
	flex: 0 0 104rpx;
	width: 104rpx;
	min-width: 104rpx;
	background-color: #f8f8f8;
	border: none;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	height: 120rpx;
	min-height: 120rpx;
	transition: all 0.3s ease;
	box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
}

.period-card:active {
		transform: scale(0.95);
	}

.period-card.selected {
		border: 1rpx solid #FF6B35 !important;
		background-color: #f8f8f8 !important;
		color: #FF6B35 !important;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2) !important;
		transform: scale(1.02);
		}

.period-card.selected .period-card__month-day,
.period-card.selected .period-card__week {
			color: #FF6B35 !important;
	}

.period-card.disabled {
		opacity: 0.5;
		background-color: #f0f0f0 !important;
		border-color: #d0d0d0 !important;
		pointer-events: none;
		cursor: not-allowed;
}

.period-card.disabled .period-card__month-day,
.period-card.disabled .period-card__week {
			color: #999999 !important;
		}

.period-card-placeholder {
	flex: 0 0 104rpx;
	width: 104rpx;
	min-width: 104rpx;
	height: 120rpx;
	background: transparent;
	border: none;
	pointer-events: none;
}

.period-card__date {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 8rpx;
	}

.period-card__month-day {
		font-size: 24rpx;
		font-weight: 400;
		color: #FF6B35;
		line-height: 1.2;
		text-align: center;
	}

.period-card__year {
	font-size: 20rpx;
	color: #999999;
	margin-top: 4rpx;
}

.period-card__week {
		text-align: center;
		font-size: 24rpx;
		color: #FF6B35;
		margin-bottom: 8rpx;
		font-weight: 400;
	}

.period-badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	min-width: 28rpx;
	height: 28rpx;
	background-color: #FF6B35;
	color: #ffffff;
	border-radius: 20rpx;
	font-size: 18rpx;
	line-height: 28rpx;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.35);
	z-index: 2;
}

.all-periods-button-spacer {
	flex: 0 0 70rpx;
	width: 70rpx;
	height: 112rpx;
}

.all-periods-button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8rpx;
	width: 90rpx;
	height: 112rpx;
	background-color: #ffffff;
	// border: 1rpx solid #FF6B35;
	border-radius: 8rpx;
	background-clip: padding-box;
	color: #FF6B35;
	font-size: 26rpx;
	position: absolute;
	right: 0;
	bottom: 20rpx;
	z-index: 2;
	order: 9999;
	box-shadow: -8rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
	line-height: 34rpx;
	bottom: 48rpx;
	right: 20rpx;
}

.all-periods-button:active {
	transform: scale(0.96);
	background: rgba(255, 103, 0, 0.2);
}

.empty-dates {
	padding: 40rpx 30rpx;
	text-align: center;
}

.empty-dates .empty-text {
	font-size: 28rpx;
	color: #999999;
}

.channel-price-info {
	padding: 20rpx 30rpx;
	background-color: rgba(63, 189, 163, 0.05);
	border-top: 1rpx solid rgba(63, 189, 163, 0.1);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

	.channel-price-label {
		font-size: 26rpx;
	color: #999999;
		margin-right: 10rpx;
	}

	.channel-price-value {
		display: inline-flex;
		align-items: baseline;
	color: #3FBDA3;
}

.channel-price-value .currency {
			font-size: 28rpx;
			font-weight: 600;
			margin-right: 2rpx;
		}

.channel-price-value .price-int {
	font-size: 32rpx;
	font-weight: 700;
			line-height: 1;
		}

.channel-price-value .price-dec {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 1;
		}

.channel-price-value .per {
			font-size: 26rpx;
			font-weight: 500;
			margin-left: 4rpx;
	color: #999999;
}

.section-titles .title-left {
	display: flex;
	align-items: center;
}

/* 更多按钮 */
.more-btn {
	display: flex;
	align-items: center;
	padding: 8rpx 16rpx;
	background: rgba(255, 103, 0, 0.1);
	border-radius: 20rpx;
	cursor: pointer;
}

.more-text {
	font-size: 24rpx;
	color: #ff6700;
	margin-right: 6rpx;
}

/* Section标题 */
.section-title {
		display: flex;
		align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 600;
	color: #a0a0a0;

}

.section-title text {
	margin: auto;
}

/* 带线条的标题样式 */
.section-title-with-lines {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20rpx;
}

.title-line {
	/* flex: 1; */
	height: 1rpx;
	background: #d0d0d0;
	margin: 0 30rpx;
	width: 200rpx;
	transform: scale(0.5);
}

.title-text {
	font-size: 28rpx;
	font-weight: 400;
			color: #999;
	white-space: nowrap;
}

.service-detail-text {
	font-size: 28rpx;
	color: #a0a0a0;
	white-space: nowrap;
}

/* 费用模块样式 */
.expense-section {
	margin-bottom: 20rpx;
}

.expense-section:last-child {
	margin-bottom: 0;
}

/* 费用标题样式 */
.expense-title {
		font-size: 28rpx;
	font-weight: bold;
	color: #ff6700;
	margin: 10rpx 0 10rpx 0;
	text-align: left;
}

/* 费用模块分隔线 */
.expense-divider {
	height: 1rpx;
	background: #e0e0e0;
	margin: 20rpx 0;
}

/* 预定须知项目头部样式 */
.expense-header {
		display: flex;
		align-items: center;
	justify-content: space-between;
	padding: 10rpx 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	background: transparent;
}

.expense-header:active {
	background: transparent;
}

/* 预定须知项目内容样式 */
.expense-content {
	padding: 10rpx 0;
}

/* 预定须知箭头图标样式 */
.notice-arrow-icon {
	width: 40rpx;
	height: 40rpx;
	transition: transform 0.3s ease;
}

.notice-arrow-rotated {
	transform: rotate(180deg);
}



/* 价格 */
.price-box {
	margin-top: 20rpx;
		font-size: 30rpx;
}

.price {
	color: #ff4d4f;
	font-weight: bold;
}

.unit {
	font-size: 24rpx;
	color: #999;
	margin-left: 4rpx;
}

.no-price {
	color: #999;
}

/* Tab导航 */
.tab-nav {
	display: flex;
	border-bottom: 1rpx solid #eee;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
}

.tab-item.active {
	color: #ff6700;
	font-weight: 600;
	border-bottom: 4rpx solid #ff6700;
}

/* Tab内容 */
.tab-content {
	padding: 20rpx 0;
}

/* 产品特色容器 */
.features-container {
	transition: all 0.3s ease;
	overflow: hidden;
}

.features-container.collapsed {
	max-height: 500rpx;
	/* 约一个手机屏幕的高度 */
	position: relative;
}

.features-container.collapsed::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: linear-gradient(transparent, #fff);
	pointer-events: none;
	z-index: 1;
}

.feature-item {
	margin-bottom: 16rpx;
}

.feature-image {
	width: 100%;
	// border-radius: 12rpx;
}

.feature-text {
	font-size: 28rpx;
	color: #444;
	padding: 4rpx 20rpx;
}

.day-item {
	padding: 0rpx 20rpx 0rpx 0rpx;
}

.day-header {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.day-badge {
	background: #20B2AA;
	color: #fff;
	padding: 12rpx 20rpx;
	border-top-right-radius: 5000rpx;
	border-bottom-right-radius: 5000rpx;
	font-size: 24rpx;
	font-weight: bold;
	margin-right: 20rpx;
	min-width: 60rpx;
	letter-spacing: 6rpx;
	text-align: center;
}

.day-content {
	flex: 1;
		display: flex;
	align-items: center;
}

.day-title {
	font-size: 32rpx;
	color: #333;
	/* line-height: 1.4; */
		flex: 1;
	font-weight: 700;
}

.day-arrow-icon {
	width: 40rpx;
	height: 40rpx;
	transition: transform 0.3s ease;
}

.day-arrow-rotated {
	transform: rotate(180deg);
}

.day-details {
	margin-top: 10rpx;
	color: #555;
		font-size: 26rpx;
}

/* 活动列表样式 */
.activity-list {
	padding: 0;
}

.activity-item {
	margin-bottom: 40rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	padding: 0rpx 20rpx 20rpx 20rpx;
}

.activity-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.activity-header {
		display: flex;
		align-items: center;
	margin-bottom: 20rpx;
}

.activity-icon {
	font-size: 20rpx;
	margin-right: 20rpx;
	width: 24rpx;
	text-align: center;
	color: #666;
}

.activity-time {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
	min-width: 100rpx;
}

.activity-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
		flex: 1;
}

.activity-details {
	margin-left: 44rpx;
}

.detail-item {
	margin-bottom: 16rpx;
	line-height: 1.5;
}

.detail-label {
		font-size: 26rpx;
	font-weight: bold;
	color: #333;
	display: inline;
}

.detail-text {
		font-size: 26rpx;
	color: #666;
	display: inline;
	margin-left: 8rpx;
}

.detail-label-icon {
	width: 28rpx;
	height: 28rpx;
}

.detail-address {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex: 1;
}

.detail-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8rpx;
}

.location-pin {
	font-size: 18rpx;
	color: #4CAF50;
	margin-left: 8rpx;
}

/* 信息行 */
.info-row {
	display: flex;
	padding: 12rpx 0;
	font-size: 28rpx;
}

.label {
	width: 180rpx;
	color: #666;
		font-size: 28rpx;
}

.value {
	flex: 1;
	color: #999;
}

/* 空内容 */
.empty-content {
	text-align: center;
	color: #aaa;
	font-size: 26rpx;
	padding: 20rpx 0;
}

/* 底部操作栏 - 立即预订 */
.bottom-action-bar-book {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: calc(120rpx + env(safe-area-inset-bottom));
	background: #fff;
		display: flex;
	align-items: center;
		justify-content: space-between;
	padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
	border-top: 1rpx solid #f2f2f2;
	z-index: 100;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 底部操作栏 - 申请调用 */
.bottom-action-bar-top {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: calc(120rpx + env(safe-area-inset-bottom));
	background: #fff;
	display: flex;
		align-items: center;
	justify-content: space-between;
	padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
	border-top: 1rpx solid #f2f2f2;
	z-index: 100;
	height: 120rpx;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 底部操作栏 - 传给渠道客户 */
.bottom-action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: calc(120rpx + env(safe-area-inset-bottom));
	background: #fff;
		display: flex;
		align-items: center;
	justify-content: space-between;
	padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
	border-top: 1rpx solid #f2f2f2;
	z-index: 100;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 左侧功能按钮 */
.left-actions {
		display: flex;
		align-items: center;
	gap: 48rpx;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.share-btn {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
	line-height: 1;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	appearance: none;
}

.share-btn::after {
	border: none;
}

.action-icon {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8rpx;
	font-size: 24rpx;
		font-weight: 600;
	margin-bottom: 8rpx;
	// background: #787878;
}

.home-icon {
	/* background: #787878; */
	width: 32rpx;
	height: 32rpx;
}

.phone-icon {
	background: #787878;
	color: #fff;
}

.share-icon {
	background: #787878;
	color: #fff;
}

.action-text {
	font-size: 20rpx;
	// font-weight: 700;
	color: #333;
}

/* 右侧绿色操作按钮 */
.right-action {
	background: #70B603;
	border-radius: 5000rpx;
	padding: 16rpx 24rpx;
		cursor: pointer;
	flex: 1;
	/* max-width: 400rpx; */
	margin-left: 32rpx;
}

/* 右侧红色操作按钮 - 立即预订 */
.right-action-red {
	background: #FF4D4F !important;
}

/* 右侧蓝色操作按钮 - 申请调用 */
.right-action-blue {
	background: #1890FF !important;
	border-radius: 5000rpx;
	padding: 20rpx 30rpx;
}

.action-content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.right-action .price-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.price-text {
	color: #fff;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 4rpx;
}

.action-desc {
	color: #fff;
		font-size: 28rpx;
	font-weight: 700;
	line-height: 1.2;
}

.arrow-icon {
	color: #fff;
	font-size: 32rpx;
	font-weight: 600;
	margin-left: 16rpx;
}

.arrow-icon-img {
	width: 32rpx;
	height: 32rpx;
}

/* 价格 */
.price-info {
	display: flex;
	align-items: baseline;
	font-weight: 600;
}

.price-symbol {
	font-size: 28rpx;
	color: #ff4d4f;
}

.price-value {
	font-size: 40rpx;
	color: #ff4d4f;
	margin: 0 6rpx;
}

.price-unit {
	font-size: 26rpx;
	color: #999;
}

/* 按钮组 */
.action-buttons {
	display: flex;
	align-items: center;
}

.btn-add,
.btn-order {
	padding: 0 36rpx;
	height: 76rpx;
	line-height: 76rpx;
	font-size: 28rpx;
	border-radius: 38rpx;
	font-weight: 500;
	border: none;
	margin-left: 16rpx;
}

/* 次按钮：加入列表 */
.btn-add {
	background: #f9f9f9;
	color: #333;
	border: 1rpx solid #ddd;
}

/* 主按钮：立即报名 */
.btn-order {
	background: linear-gradient(135deg, #ff6700, #ff914d);
	color: #fff;
	box-shadow: 0 4rpx 10rpx rgba(255, 103, 0, 0.3);
}

/* 展开按钮 */
.expand-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
	padding: 16rpx 0;
	cursor: pointer;
}

.expand-text {
	font-size: 24rpx;
	color: #ff6700;
	margin-right: 8rpx;
}

/* 产品标题容器 */
.title-container {
	padding: 30rpx;
	background: #fff;
	border-radius: 5rpx;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
	z-index: 998;
}


.title-container.sticky-title {
	position: fixed;
	/* top 通过内联样式控制，不使用安全区域 */
	left: 0;
	right: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	border-bottom: 1rpx solid #f0f0f0;
	/* 优化固定定位性能 */
	transform: translateZ(0);
	will-change: transform;
}

/* 产品标题占位元素 */
.title-placeholder {
	height: 120rpx;
	margin: 20rpx;
}

/* 导航栏容器 */
.nav-container {
	margin: 20rpx 0rpx;
	padding: 0rpx 20rpx;
	height: 80rpx;
	background: #fff;
	border-radius: 5rpx;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
	display: flex;
	z-index: 999;
}

.nav-container.sticky-nav {
	position: fixed;
	/* top 通过内联样式控制，位于标题下方 */
	left: 0;
	right: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	border-bottom: 1rpx solid #f0f0f0;
	/* 优化固定定位性能 */
	transform: translateZ(0);
	will-change: transform;
}

.nav-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 10rpx;
	font-size: 26rpx;
		color: #666;
	position: relative;
	transition: color 0.3s ease;
}

.nav-item.active {
	color: #ff6700;
	font-weight: 600;
}

.nav-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: #ff6700;
	border-radius: 2rpx;
}

/* 导航栏占位元素 */
.nav-placeholder {
	height: 80rpx;
	margin: 20rpx;
}

/* 营期选择弹出层样式 */
.date-modal {
	background: #fff;
	padding: 0;
	max-height: 70vh;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
	font-size: 32rpx;
		font-weight: 600;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f8f8f8;
}

.modal-content {
	padding: 30rpx;
	max-height: 50vh;
	overflow-y: auto;
}

.date-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.date-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	background: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
}

.date-item.active {
	border-color: #ff6700;
	background: rgba(255, 103, 0, 0.05);
	}

.date-day {
		font-size: 28rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.date-item.active .date-day {
	color: #ff6700;
}

.date-week {
	font-size: 24rpx;
		color: #999;
	margin-bottom: 8rpx;
}

.date-item.active .date-week {
	color: #ff6700;
}

.date-price {
	font-size: 22rpx;
	color: #ff4d4f;
	font-weight: 500;
}

.modal-footer {
	padding: 30rpx;
	border-top: 1rpx solid #f0f0f0;
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #ff6700, #ff914d);
	color: #fff;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 600;
}

/* 预览页面提示 */
.preview-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	padding: 30rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	background: linear-gradient(135deg, #fff5f0, #ffe8d6);
	border-top: 2rpx solid #ff6700;
	box-shadow: 0 -4rpx 12rpx rgba(255, 103, 0, 0.1);
	z-index: 1000;
	min-height: 120rpx;
	box-sizing: border-box;
}

.preview-icon {
	margin-right: 20rpx;
	padding: 16rpx;
	background: rgba(255, 103, 0, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preview-text {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.preview-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #ff6700;
	margin-bottom: 8rpx;
}

.preview-desc {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.4;
}

.exit-preview-btn {
	margin-left: 20rpx;
	padding: 16rpx 28rpx;
	background: linear-gradient(135deg, #ff8333, #ff6700);
	color: #ffffff;
	border-radius: 44rpx;
		font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(255, 103, 0, 0.25);
	min-width: 168rpx;
	text-align: center;
}

.itinerary-detail-item {
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.itinerary-detail-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.item-time-container {
	display: flex;
	align-items: center;
	// margin-bottom: 16rpx;
	margin-left: 20rpx;
}

.item-time {
		font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-right: 10rpx;
}

.item-type {
	font-size: 28rpx;
	color: #666;
}

.item-separator {
	margin: 0 10rpx;
	color: #999;
}

.item-name {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}

/* 地址显示样式 */
.address-display {
		display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.address-name {
	font-size: 26rpx;
	color: #333;
	font-weight: 700;
	line-height: 1.4;
}

.address-location {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
	margin-left: 0;
}

.item-details {
	margin-left: 20rpx;
		margin-bottom: 20rpx;
	margin-top: 20rpx;
}

.item-detail-row {
			display: flex;
	// margin-bottom: 10rpx;
	font-size: 24rpx;
	line-height: 1.5;
}

.detail-label {
	color: #999;
	margin-right: 20rpx;
	min-width: 70rpx;
				display: flex;
				align-items: center;
	justify-content: flex-end;

	.detail-label-icon {
		width: 28rpx;
		height: 28rpx;
		// margin-top:6rpx;
	}
}

.detail-value {
	font-size: 26rpx;
	color: #666;
	display: inline;
	margin-left: 8rpx;
}

.server-title {
	font-weight: 700;
	color: #000000;
	font-size: 30rpx;
	margin-bottom: 20rpx;
	// margin-left: 20rpx;
}

.serve-box {
	display: flex;
	align-items: flex-start;
	margin-top: 20rpx;
	color: #999999;
}

.serve-title {
	font-size: 28rpx;
	// width: 200rpx;
	margin-right: 20rpx;
}

.serve-content {
	font-size: 28rpx;
}

.section-header__icon-wrapper {
	width: 40rpx;
	height: 40rpx;
	background: #f2f2f2;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.section-header__icon.section-header__font_icon {
	margin-right: 0;
	background: transparent;
}

.section-header__font_icon {
	color: #787878
}

.period-cards-scroll .empty-dates {
	min-width: 200rpx;
}


.all-periods-button-spacer-placeholder {
	flex: 0 0 70rpx;
	width: 70rpx;
	height: 112rpx;
}

.all-periods-button-placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8rpx;
	width: 98rpx;
	height: 112rpx;
	background-color: #ffffff;
	// border: 1rpx solid #FF6B35;
	border-radius: 8rpx;
	background-clip: padding-box;
	color: #FF6B35;
	font-size: 26rpx;
	position: absolute;
	right: 0;
	bottom: 20rpx;
	z-index: 2;
	order: 9999;
	box-shadow: -8rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
	line-height: 34rpx;
	bottom: 48rpx;
	right: 20rpx;
}

.all-periods-button-placeholder:active {
	transform: scale(0.96);
	background: rgba(255, 103, 0, 0.2);
}
</style>